导航栏内容不变

Question

下面是我的代码。由于某些原因，当我加载页面时，导航栏显示“主页”的内容。当我单击菜单选项卡时，一切都正常工作。但由于某些原因，当我单击方案选项卡时，我只能看到主页选项卡的内容

<div class="container">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
        <div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
            <div class="input-group mb-3">
              <ul>  
                  <div class="input-group-prepend">
                    <button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
                  </div>
                  <input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
                    <ul id="dynamic-list"></ul>
                </ul>
            </div>        
        </div>
        <div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
    </div>
</div>

我觉得它必须是非常简单的东西，提前谢谢。

Answer 1

您的代码在我看来很好，应该可以工作。我怀疑你加载jQuery和Bootstrap JS和CSS文件的方式有问题。检查控制台是否有错误。

这是你的代码的一个工作样本--我只是使用了最新的jQuery & Bootstrap CDN文件：

​

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="menu-tab" data-toggle="tab" href="#menu" role="tab" aria-controls="menu" aria-selected="false">Menu</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="scheme-tab" data-toggle="tab" href="#scheme" role="tab" aria-controls="scheme" aria-selected="false">Scheme</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">home tab</div>
    <div class="tab-pane fade" id="menu" role="tabpanel" aria-labelledby="menu-tab">
      <div class="input-group mb-3">
        <ul>
          <div class="input-group-prepend">
            <button class="btn btn-outline-secondary" id="addItem" type="button">Add Item to Menu</button>
          </div>
          <input type="text" class="form-control" id="addItemInput" placeholder="Enter New Item Here" aria-label="" aria-describedby="basic-addon1">
          <ul id="dynamic-list"></ul>
        </ul>
      </div>
    </div>
    <div class="tab-pane fade" id="scheme" role="tabpanel" aria-labelledby="scheme-tab">What?</div>
  </div>
</div>

​