Question

我正在创建一个注册和登录页面。当我点击其他标签时。它只是把我送到#signup。我不知道为什么会这样。我已尽力而为，但它仍然不会切换标签。我甚至尝试从其他网站复制源代码，但仍然无法正常工作。

        <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
        <h2>Sign in or Sign up</h2>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#signin">Sign in</a></li>
            <li><a data-toggle="tab" href="#signup">Sign up</a></li>
        </ul>

        <div class="tab-content">
            <div id="signin" class="tab-pane fade in active">
                <h3>SIGN IN</h3>
                <form role="Form" method="POST" action="" accept-charset="UTF-8">
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username..." class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password..." class="form-control">
                    </div>
                    <div class="form-group">
                        <label>
                            <input type="checkbox" name="remember"> Remember me
                        </label>
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default">Sign In</button>
                    </div>
                </form>
            </div>
            <div id="signup" class="tab-pane fade">
                <h3>SIGN UP</h3>
                <form role="Form" method="POST" action="" accept-charset="UTF-8">
                    <div class="form-group">
                        <input type="text" name="email" placeholder="Email..." class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="text" name="username" placeholder="Username..." class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="Password..." class="form-control">
                    </div>
                    <div class="form-group">
                        <input type="password" name="password2" placeholder="Verify password..." class="form-control">
                    </div>
                    <div class="form-group">
                        <button type="submit" class="btn btn-default">Sign Up</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

Answer 1

您确定所有内容都已正确关联吗？

我使用了this页面中的基本模板。并将复制粘贴在正文中。

见下面的例子，它正好在两个标签之间来回切换。控制台有错误吗？

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>

<body>
  <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-6 col-lg-offset-3">
    <h2>Sign in or Sign up</h2>
    <ul class="nav nav-tabs">
      <li class="active"><a data-toggle="tab" href="#signin">Sign in</a></li>
      <li><a data-toggle="tab" href="#signup">Sign up</a></li>
    </ul>

    <div class="tab-content">
      <div id="signin" class="tab-pane fade in active">
        <h3>SIGN IN</h3>
        <form role="Form" method="POST" action="" accept-charset="UTF-8">
          <div class="form-group">
            <input type="text" name="username" placeholder="Username..." class="form-control">
          </div>
          <div class="form-group">
            <input type="password" name="password" placeholder="Password..." class="form-control">
          </div>
          <div class="form-group">
            <label>
                            <input type="checkbox" name="remember"> Remember me
                        </label>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Sign In</button>
          </div>
        </form>
      </div>
      <div id="signup" class="tab-pane fade">
        <h3>SIGN UP</h3>
        <form role="Form" method="POST" action="" accept-charset="UTF-8">
          <div class="form-group">
            <input type="text" name="email" placeholder="Email..." class="form-control">
          </div>
          <div class="form-group">
            <input type="text" name="username" placeholder="Username..." class="form-control">
          </div>
          <div class="form-group">
            <input type="password" name="password" placeholder="Password..." class="form-control">
          </div>
          <div class="form-group">
            <input type="password" name="password2" placeholder="Verify password..." class="form-control">
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-default">Sign Up</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>

</html>

Bootstrap选项卡内容未切换

1 个答案: