Question

我正在使用引导标签。我希望当按钮＆＃34;登录＆＃34;单击显示选项卡的内容，其中id =＆＃34;登录＆＃34;当按钮＆＃34;创建帐户＆＃34;单击我想要出现标签的内容id =＆＃34;注册＆＃34;。我有下面的代码，但它不起作用，你知道错误在哪里吗？

注意：选项卡的ID为＆＃34;登录＆＃34;默认情况下应该是活动标签。

实施例：https://jsfiddle.net/mahfupmr/

HTML：

Answer 1

您已经关闭，但您的导航链接需要根据文档here放置在无序列表中。

<强>更新我添加了CSS来对齐您的导航药片。

＆＃13;

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

＆＃13;

<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>

＆＃13;

在链接点击上显示内容无效

1 个答案: