Twitter Bootstrap选项卡活动类切换不起作用
我正在使用Twitter bootstrap nav标签和导航药丸。这是我的html代码：
<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>现在，如果我添加attribute data-toggle="pill"并使用data-toggle="tab"，则带有活动类的选项卡将更改为我已单击的选项卡。然而，href不再有效。如果我不使用这些类，href可以工作，但是活动类不会改变，它总是停留在加载页面时给出的元素上。
我甚至尝试过使用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>回答 7
Stack Overflow用户
发布于 2013-04-18 08:23:22
Bootstrap nav标签和药丸与JS插件一起工作。插件被加载到页面上，并负责突出显示和记住当前活动的选项卡或药丸。如果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读取它(如果你有文件扩展名或查询字符串要处理，这可能会更容易和更健壮)。
祝你好运！:)
Stack Overflow用户
发布于 2013-09-01 11:47:46
需要考虑的事情:如果每个li元素都使用不同的控制器，那么您可以尝试下面的方法。
How to get Twitter-Bootstrap navigation to show active link?
您的代码可能如下所示：
<ul class="nav nav-pills">
<li class="<%= 'active' if params[:controller] == 'home' %>"> <a href="link" data-toggle="pill">Top</a></li>
<li class="<%= 'active' if params[:controller] == 'rules' %>"><a href="link" data-toggle="pill">Rules</a></li>
<li class="<%= 'active' if params[:controller] == 'player' %>"><a href="link" data-toggle="pill">Player</a></li>
<li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="link" data-toggle="pill">Categories</a></li>
</ul>Stack Overflow用户
发布于 2014-08-15 17:08:59
这个例子对我很有效：
$leftBlock.on("click", "#navFinished", function(){
$('ul.nav-pills li.active').removeClass('active');
$(this).addClass('active');
});虽然此示例不起作用
$leftBlock.on("click", "#navFinished", function(){
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})删除.parent("li")会有所帮助。
https://stackoverflow.com/questions/16072421
复制相似问题