jQuery Twitter Bootstrap Tabs 活动类切换不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16072421/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Tabs active class toggle not working
提问by CodeMonkey
I am using Twitter bootstrap nav tabs and nav pills. This is my html code:
我正在使用 Twitter 引导程序导航选项卡和导航药丸。这是我的 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>
Now if I add attribute data-toggle="pill"and data-toggle="tab"the tab with active class change to one which I have clicked. However, hrefis no longer working.
If I do not use these classes, hrefworks but active class does not change and it always stays to the element that class was given at the load of page.
现在，如果我添加属性data-toggle="pill"， data-toggle="tab"并将具有活动类的选项卡更改为我单击的选项卡。但是，href不再起作用。如果我不使用这些类，则href可以工作，但活动类不会更改，并且它始终保留在页面加载时提供的类的元素。
I even tried using jQuery to toggle class behavior and it does not work as well. My script code is:
我什至尝试使用 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>
回答by Mathijs Flietstra
Bootstrap nav tabs and pills work with a JS plugin. The plugin is loaded on the page and takes care of the highlighting and the remembering of the currently active tab or pill. It disables the href attributes if they link to other pages, simply because when you click on a link to another page, a new page is loaded. The JS is then reloaded for this new page, and it does not know about which tab or pill is currently active. They are designed to work with single page apps or links to anchors on the same page, and they work fine for that purpose.
Bootstrap 导航选项卡和药丸与 JS 插件一起使用。该插件加载在页面上，负责突出显示和记住当前活动的选项卡或药丸。如果它们链接到其他页面，它会禁用 href 属性，因为当您单击指向另一个页面的链接时，会加载一个新页面。然后为这个新页面重新加载 JS，它不知道哪个选项卡或药丸当前处于活动状态。它们旨在与单页应用程序或指向同一页面上的锚点的链接一起使用，并且可以很好地用于此目的。
The jQuery approach fails for the same reason, but might be easier to explain.
jQuery 方法因同样的原因而失败，但可能更容易解释。
$('ul.nav-pills li a').click(function (e) {
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
You click on a link, JS goes off and changes the class, only if it has enough time to do so before the next page is loaded, this next page is loaded because the href attribute on the link tells the browser to navigate to a new page. And the new page loads your JS again, it can't possibly remember the variables from the previous page, like which tab or pill is meant to be active.
你点击一个链接，JS 关闭并更改类，只有在加载下一页之前有足够的时间这样做时，才会加载下一页，因为链接上的 href 属性告诉浏览器导航到一个新的页。新页面再次加载您的 JS，它可能无法记住上一页中的变量，例如哪个选项卡或药丸应该处于活动状态。
If you are going to navigate to other pages, you might as well just set the active class on the right tab for the specific page that is being loaded.
如果您要导航到其他页面，您不妨在右侧选项卡上为正在加载的特定页面设置活动类。
If you really need to do this on the client side, you could do something like this, and load it on each page.
如果您真的需要在客户端执行此操作，您可以执行这样的操作，并在每个页面上加载它。
$(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();
});
It sets the active tab based on the last part of the URL, it's kind of specific to your scenario (and previously my scenario) though. You'd have to adapt it if there were file extensions or query parameters involved. Every page needs to at least have a link to itself on it. And it preferably has the exact same header with the same tabs and pills rendered on it as all the other pages.
它根据 URL 的最后一部分设置活动选项卡，但它特定于您的场景（以及之前我的场景）。如果涉及文件扩展名或查询参数，则必须对其进行调整。每个页面至少需要有一个指向它自己的链接。并且它最好具有与所有其他页面完全相同的页眉，并在其上呈现相同的选项卡和药丸。
Both of these last points again raise the thought in my mind "if you have to have this much control over what exactly is being rendered onto the page, you probably have access to the server side", and if that is the case, you might as well fix it there, as every link does a new request to the server anyway. And your solution wouldn't have to rely on some not so robust JavaScript to work.
最后两点再次在我的脑海中引发了一个想法“如果你必须对呈现在页面上的内容进行如此多的控制，你可能可以访问服务器端”，如果是这种情况，你可能也可以在那里修复它，因为无论如何每个链接都会向服务器发出一个新请求。而且您的解决方案不必依赖于一些不太健壮的 JavaScript 来工作。
So this is what I had going at one stage, you could improve it, or implement a solution where you post some data to the next page and read it with JavaScript there (which would probably be easier and more robust if you had file extensions or query strings to deal with).
所以这就是我在一个阶段所做的，你可以改进它，或者实施一个解决方案，将一些数据发布到下一页并在那里用 JavaScript 读取它（如果你有文件扩展名或要处理的查询字符串）。
Good luck with it! :)
祝你好运！:)
回答by syeh
Something to consider: If each li element uses a different controller, here's something you could try.
需要考虑的事情：如果每个 li 元素使用不同的控制器，您可以尝试以下方法。
How to get Twitter-Bootstrap navigation to show active link?
如何让 Twitter-Bootstrap 导航显示活动链接？
Your code could look something like this:
您的代码可能如下所示：
<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>
回答by syeh
This example worked for me:
这个例子对我有用：
$leftBlock.on("click", "#navFinished", function(){
$('ul.nav-pills li.active').removeClass('active');
$(this).addClass('active');
});
While this example did not work
虽然这个例子不起作用
$leftBlock.on("click", "#navFinished", function(){
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
Removing .parent("li") helped.
删除 .parent("li") 有帮助。
回答by user3702201
I followed @syeh solution and got it right. Below is a snippet of my code.
我遵循@syeh 解决方案并做对了。下面是我的代码片段。
<ul class="nav nav-pills">
<li <?php if (strchr($this->pageTitle,' Job') === ' Job') echo 'class=active';?>><?php echo CHtml::link('JOBS', array('Job/index'));?></li>
<li <?php if (strchr($this->pageTitle,'Artisan') === 'Artisan') echo 'class=active';?>><?php echo CHtml::link('ARTISANS', array('Artisan/index'));?></li>
<li <?php if (strchr($this->pageTitle,'Task') === 'Task') echo 'class=active';?>><?php echo CHtml::link('TASKS',array('Task/index'));?></li>
</ul>
回答by praniclift
I was having a similar issue: when clicked, tabs would become active but would not properly remove the activeclass from other tabs (i.e. every tab the user clicked on a pageview would have the activeclass).
我遇到了类似的问题：单击时，选项卡将变为活动状态，但无法active从其他选项卡中正确删除该类（即用户在页面浏览中单击的每个选项卡都具有active该类）。
Switching from an <ol>to a <ul>made the tabs behave properly.
从<ol>a切换到 a<ul>使选项卡行为正常。
回答by kwcto
This is a more generalized client side solution using jQuery. It only assumes that your tabs have the data-toggle attribute and each group of tabs is wrapped in some kind of container element.
这是使用 jQuery 的更通用的客户端解决方案。它仅假设您的选项卡具有 data-toggle 属性，并且每组选项卡都包含在某种容器元素中。
$('[data-toggle="tab"],[data-toggle="pill"]').click(function() {
$(this).parent().children('.active[data-toggle="tab"],.active[data-toggle="pill"]').removeClass('active');
$(this).addClass('active');
});
回答by Greg Rundlett
<?php
function activate($uri) {
if ($_SERVER['REQUEST_URI'] == $uri) {
echo ' class="active" ';
}
}
?>
<nav>
<ul class="nav nav-tabs">
<li role="tab" <?php activate('/wikireport/index.php'); ?> ><a href="index.php" aria-controls="Home">Wiki Report</a></li>
<li role="tab" <?php activate('/wikireport/examples.php'); ?> ><a href="examples.php" aria-controls="Examples">Examples</a></li>
<li role="tab" <?php activate('/wikireport/about.php'); ?> ><a href="about.php" aria-controls="About">About</a></li>
</ul>
</nav>
And then in the "content" file, just require/include your navline.php
然后在“内容”文件中，只需要/包含您的 navline.php
<?php
include('navline.php');
?>
