我试图在我的网站上用Bootstrap创建这个导航栏，但我不确定为什么我要菜单5只显示东京是日本的首都但显然，菜单2中的其他项目仍在显示，我有已经有一段时间了，不知道出了什么问题。我还检查了我的div以确保正确关闭。我是新手。
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="infoBox">
<div>
<ul class="nav nav-tabs ">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu5">Menu 5</a></li>
</ul>
</div>
<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 id="menu5" class="tab-pane fade">
<div>
<h1>Tokyo</h1>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：2)
你的最后一个菜单div在错误的地方
将menu5 div分为两个级别：
$(document).ready(function(){
$(".nav-tabs a").click(function(){
$(this).tab('show');
});
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" id="infoBox">
<div>
<ul class="nav nav-tabs ">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#menu1">Menu 1</a></li>
<li><a href="#menu5">Menu 5</a></li>
</ul>
</div>
<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>
<div id="menu5" class="tab-pane fade">
<div>
<h1>Tokyo</h1>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
</div>
</body>
</html>