jquery - 单击链接时显示内容不起作用

Question

我正在使用 Bootstrap 选项卡。我想当单击“登录”按钮时显示 id="Login"选项卡的内容，当单击“创建帐户”按钮时我希望显示 id="Register"选项卡的内容。我有下面的代码，但它不起作用，你知道错误在哪里吗？

注意:默认情况下，id="Login"的选项卡应该是事件选项卡。

示例:https://jsfiddle.net/mahfupmr/

HTML:

<p class="text-center">You need to login or create an account to create a post</p>


<div class="row mt-4 d-flex justify-content-center">
  <div class="col-12 col-md-6">

    <div class="loginForm bg-white border">
      <div class="text-center mt-4">
        <a href="#login" data-toggle="tab" role="tab" class="btn btn-primary">Login</a>
        <a href="#register" data-toggle="tab" role="tab" class="btn btn-outline-primary">Create Account</a>
      </div>

      <div class="tab-content registration_body bg-white mt-4" id="tabbb">

        <div class="tab-pane fade show active clearfix" id="login" role="tabpanel" aria-labelledby="home-tab">



          <form class="clearfix" method="POST" action="">

            <div class="form-group col-12 px-0">
              <label for="inputEmail4"
                     class="text-heading font-weight-semi-bold">Email</label>
              <input type="email" class="form-control" value="" name="email" required autofocus placeholder="Email">
            </div>

            <div class="form-group col-12 px-0">
              <label for="inputEmail4"
                     class="text-heading font-weight-semi-bold">Pass
              </label>
              <input type="password" class="form-control" name="password" required placeholder="Pass">
            </div>
            <button type="submit" class="btn btn-primary btn d-block w-100">Login</button>

          </form>
        </div>

        <div class="tab-pane fade show  clearfix" id="register" role="tabpanel" aria-labelledby="home-tab">
          <form method="post" class="clearfix" method="POST" action="">

            <div class="form-group col-12 px-0">
              <label for="name"
                     class="text-heading font-weight-semi-bold">Name</label>
              <input type="text" class="form-control" name="name" value="" required autofocus>

            </div>

            <div class="form-group col-12 px-0">
              <label for="email"
                     class="text-heading font-weight-semi-bold">Email</label>
              <input id="email" type="email" class="form-control" name="email" value="" required>

            </div>
            <div class="form-group col-12 px-0">
              <label for="password"
                     class="text-heading font-weight-semi-bold">Pass</label>
              <input id="password" type="password" class="form-control" name="password" required>
            </div>
            <div class="form-group col-12 px-0">
              <label for="password-confirm"
                     class="text-heading font-weight-semi-bold">Confirm Pass</label>
              <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
            </div>

            <button type="submit" class="btn btn-primary btn d-block w-100">Create Account</button>

          </form>
        </div>
      </div>
    </div>

Answer 1

你很接近，但你的导航链接需要根据文档放置在无序列表中 here .

更新我添加了 CSS 以居中对齐您的导航药丸。

.nav-tabs {
    display: flex;
    justify-content: center;
    flex-direction: row;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<p class="text-center">You need to login or create an account to create a post</p>


<div class="row mt-4 d-flex justify-content-center">
  <div class="col-12 col-md-6">

    <div class="loginForm bg-white border">
      <div class="text-center mt-4 nav-tab">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a href="#login" data-toggle="tab" role="tab" class="btn btn-primary">Login</a>
          </li>
          <li class="nav-item">
            <a href="#register" data-toggle="tab" role="tab" class="btn btn-outline-primary">Create Account</a>
          </li>
        </ul>
      </div>

      <div class="tab-content registration_body bg-white mt-4" id="tabbb">

        <div class="tab-pane fade show active clearfix" id="login" role="tabpanel" aria-labelledby="home-tab">



          <form class="clearfix" method="POST" action="">

            <div class="form-group col-12 px-0">
              <label for="inputEmail4" class="text-heading font-weight-semi-bold">Email</label>
              <input type="email" class="form-control" value="" name="email" required autofocus placeholder="Email">
            </div>

            <div class="form-group col-12 px-0">
              <label for="inputEmail4" class="text-heading font-weight-semi-bold">Pass
              </label>
              <input type="password" class="form-control" name="password" required placeholder="Pass">
            </div>
            <button type="submit" class="btn btn-primary btn d-block w-100">Login</button>

          </form>
        </div>

        <div class="tab-pane fade show  clearfix" id="register" role="tabpanel" aria-labelledby="home-tab">
          <form method="post" class="clearfix" method="POST" action="">

            <div class="form-group col-12 px-0">
              <label for="name" class="text-heading font-weight-semi-bold">Name</label>
              <input type="text" class="form-control" name="name" value="" required autofocus>

            </div>

            <div class="form-group col-12 px-0">
              <label for="email" class="text-heading font-weight-semi-bold">Email</label>
              <input id="email" type="email" class="form-control" name="email" value="" required>

            </div>
            <div class="form-group col-12 px-0">
              <label for="password" class="text-heading font-weight-semi-bold">Pass</label>
              <input id="password" type="password" class="form-control" name="password" required>
            </div>
            <div class="form-group col-12 px-0">
              <label for="password-confirm" class="text-heading font-weight-semi-bold">Confirm Pass</label>
              <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
            </div>

            <button type="submit" class="btn btn-primary btn d-block w-100">Create Account</button>

          </form>
        </div>
      </div>
    </div>
  </div>
</div>