Bootstrap Nav tabs异常：点击Menu5仍显示Menu2内容

嘿，我找到你问题的根源啦！有两个小错误导致了这个情况，咱们一个个来解决：

1. jQuery选择器写错了 #

你写的$("nav-tabs a")是在找名为<nav-tabs>的标签，但nav-tabs其实是个class类名，正确的选择器应该是**.nav-tabs a**（别忘了前面的点）。这个错误会导致你的tab切换逻辑根本没生效，点击菜单时没法正确触发Bootstrap的tab切换功能。

2. HTML结构嵌套错误 #

你把menu5的tab-pane嵌套在menu1的tab-pane里面了！它们应该是同级元素，都直接放在.tab-content容器下，这样切换菜单时才能独立显示/隐藏各自的内容。

下面是修正后的完整代码，你可以直接替换试试：

修正后的JS代码：

$(document).ready(function(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});

修正后的HTML代码（关键结构部分）：

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
  </div>
  <div id="menu1" class="tab-pane fade">
    <div>
      <h1>Query by Placename Name</h1>
      <p>Query</p>
      <p>
        <b>Select Overlay Map</b>
      </p>
      <select name="Layerchoice" id="select1" onchange="dropdown_onchange(this)">
        <option value="dummy" disabled selected>Please select</option>
        <option value="OSM">Testlayer1</option>
        <option value="stamen">Testlayer2</option>
      </select>
      <div>
        <input name="scalecheck" value="1" type="checkbox">Map Scale
        <div id="radio" class="buttons">
          <input type="radio" name="scale" id="linearcheck">Linear Scale<br/>
          <input type="radio" name="scale" id="bettercheck">Alternating Scale Bar<br/>
        </div>
        <div id="layercontrol">
          <button type="button" id="button-basemap1" onclick="togglePoints();">Basemap 1</button>
          <input type="checkbox" id="layercontrol2" />Base Map<br />
          <input type="checkbox" onclick="ToggleSatellite();" />Satellite<br />
          <input type="checkbox" onclick="ToggleLabels();" />Labels<br />
          <input type="checkbox" onclick="ToggleTraffic();" />Traffic<br />
        </div>
      </div>
    </div>
  </div> <!-- 这里是menu1的闭合标签 -->
  <!-- 把menu5移到外面，和menu1同级 -->
  <div id="menu5" class="tab-pane fade">
    <div>
      <h1>Tokyo</h1>
      <p>Tokyo is the capital of Japan.</p>
    </div>
  </div>
</div>

这样修改后，点击Menu5就只会显示东京的内容，Menu1的内容会被隐藏啦！另外，其实Bootstrap还支持通过给链接加data-toggle="tab"属性来实现切换，不需要写JS，比如：

<li><a href="#menu1" data-toggle="tab">Menu 1</a></li>
<li><a href="#menu5" data-toggle="tab">Menu 5</a></li>

这样连那个JS代码都可以省掉，对你这种新手来说可能更简单哦！

内容的提问来源于stack exchange，提问作者lloyd