我正在使用Twitter引导导航标签和导航药片。这是我的代码：
<div class="Header2" style="background-color:#1E3848">
<div id="headerTab">
<ul class="nav nav-tabs">
<li class="active ans-tab"> <a href="http://myweb.com/">Home</a></li>
<li class="topTab"><a href="http://myweb.com/score/">score</a></li>
<li class="topTab"><a href="http://myweb.com/leaderboards/">Leaderboards</a></li>
</ul>
</div>
<div id="subHeaderTabPlayer">
<ul class="nav nav-pills">
<li class="active"> <a href="http://myweb.com/">Top</a></li>
<li><a href="http://myweb.com/rules/" data-toggle="pill">Rules</a></li>
<li><a href="http://myweb.com/player/" data-toggle="pill">Player</a></li>
<li><a href="http://myweb.com/categories/" data-toggle="pill">Categories</a></li>
</ul>
</div>
</div>
现在如果我添加属性data-toggle =“pill”和data-toggle =“tab”，活动类的选项卡更改为我已点击的。但是，href不再工作。
如果我不使用这些类，href的工作，但活动类不会改变，它始终保持在页面的加载类给定的元素。
我甚至尝试使用jQuery来切换类的行为，它也不起作用：jQuery代码：
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).load(function(){
document.getElementById( 'subHeaderTabPlayer' ).style.display = 'none';
$('ul.nav-tabs li a').click(function (e) {
var activeTab= document.getElementByClass('active');
activeTab.removeAttribute("class");
$('ul.nav-tabs li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
$('ul.nav-pills li a').click(function (e) {
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
$(".ans-tab").click(function() {
document.getElementById('subHeaderTabPlayer').style.visibility = 'visible';
document.getElementById('subHeaderTabPlayer' ).style.display = 'block';
});
$(".topTab").click(function() {
document.getElementById('subHeaderTabPlayer').style.visibility = 'collapse';
document.getElementById('subHeaderTabPlayer' ).style.display = 'none';
});
});
</script>
解决方法
Bootstrap导航选项卡和药丸使用JS插件。该插件被加载在页面上，并处理突出显示和记住当前活动的选项卡或药片。如果href属性链接到其他页面，则会禁用href属性，只因为当您单击链接到另一页面时，会加载一个新页面。然后，JS将重新加载此新页面，并且不知道当前活动哪个标签或药丸。它们旨在与单页应用程序或链接到同一页面上的锚点，并且它们可以正常工作。
由于相同的原因，jQuery方法失败，但可能更容易解释。
$('ul.nav-pills li a').click(function (e) {
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
您点击一个链接，JS会关闭并更改类，只有在下一页加载之前有足够的时间才能完成，下一页将被加载，因为该链接上的href属性会指示浏览器导航到新的页。新的页面再次加载你的JS，它不可能记住上一页的变量，就像哪个标签或药片是活动的。
如果要导航到其他页面，您也可以在正确加载的特定页面的右侧选项卡上设置活动类。
如果您真的需要在客户端执行此操作，则可以执行此操作，并将其加载到每个页面上。
$(document).ready(function () {
// Set BaseURL
var baseURL = 'http://myweb.com/'
// Get current URL and replace baseURL
var href = window.location.href.replace(baseURL,'');
// Remove trailing slash
href = href.substr(-1) == '/' ? href.substr(0,href.length - 1) : href;
// Get last part of current URL
var page = href.substr(href.lastIndexOf('/') + 1);
// Add trailing slash if not empty (empty means we're currently at baseURL)
page = page != '' ? page + '/' : page;
// Select link based on href attribute and set it's closest 'li' to 'active'.
// .siblings('.active').removeClass() is only needed if you have a default 'active li'.
$('a[href="' + baseURL + page + '"]','.nav li').closest('li').addClass('active').siblings('.active').removeClass();
});
它根据URL的最后一部分设置活动选项卡，但它是一种特定于您的方案(以及我的方案)。如果涉及文件扩展名或查询参数，则必须修改它。每个页面至少需要有一个链接到它自己。并且它最好具有完全相同的标题，其上显示与其他页面相同的标签和药丸。
这两个最后一点再次引发了我的想法：“如果你必须对这个页面上的内容进行怎样的控制，你可能有权访问服务器端”，如果是这样，你可能会以及修复它，因为每个链接都向服务器发出一个新的请求。而且你的解决方案不一定要靠一些不那么强大的JavaScript来工作。
所以这是我在一个阶段进行的，你可以改进它，或者实现一个解决方案，你将一些数据发布到下一个页面，并在那里用JavaScript进行读取(如果你有文件扩展名或可能会更容易，查询字符串来处理)。
祝你好运！
