我正在使用bootstrap（version：3.3.7）实现简单的导航。
这是我的代码：
<head>
<meta charset="UTF-8">
<script src="lib/bower_components/jquery/dist/jquery.js"></script>
<script src="lib/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="lib/bower_components/bootstrap/dist/css/bootstrap.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" href="#SNP">SNP</a> </li>
<li><a data-toggle="tab" href="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>
</div>
</body>
</html>
当我第一次进入此页面时，Chrome（版本：
57.0.2987.110）显示URL为www.foofoo.org/page1。当我单击ul中包含标签的链接时，它变为www.foofoo.org/page1#SNP或www.foofoo.org/page1#SSR。无论我单击哪个链接，如何都将URL设为www.foofoo.org/page1（换句话说，URL始终为www.foofoo.org/page1）。 最佳答案
通过在锚标记中使用data-target属性而不是href，您将能够获得相同的效果：
<ul class="nav nav-tabs nav-justified">
<li class="active"><a data-toggle="tab" data-target="#SNP">SNP</a> </li>
<li><a data-toggle="tab" data-target="#SSR">SSR</a> </li>
</ul>
<div class="tab-content">
<div id="SNP" class="tab-pane fade in active">
Something about SNP.
</div>
<div id="SSR" class="tab-pane fade">
Something about SSR.
</div>
</div>
这意味着您不会在地址栏中更改URL。但是，我建议您将
href="#"保留在其中，否则您的锚标记将表现异常。