使用 jQuery 和 Twitter Bootstrap 查找 Active Tab
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12040820/
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
Find Active Tab using jQuery and Twitter Bootstrap
提问by William Orazi
I've been racking my brain for a little while now, and I would like to know if anyone out there knows how I can find the active tab, using jQuery and Twitter's Bootstrap. Pulling the hash from the URL is not my first option, I'm using the data-toggleattribute in the <a>link so there is no need to produce a URL hash.
我已经绞尽脑汁有一段时间了，我想知道是否有人知道如何使用 jQuery 和 Twitter 的 Bootstrap 找到活动选项卡。从 URL 中提取散列不是我的第一选择，我data-toggle在<a>链接中使用该属性，因此无需生成 URL 散列。
Any insight? Here's an example of my markup:
任何见解？这是我的标记示例：
<ul class="nav nav-list" id="sampleTabs">
<li><a href="#example" data-toggle="tab">Tab 1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="example">
Example Tab
</div>
</div>
<script>
$('#sampleTabs a:first').tab('show');
</script>
I'm open to any suggestion - using a PHP session, JS cookie, etc.
我愿意接受任何建议 - 使用 PHP 会话、JS cookie 等。
Edit: This is the real issue. I have a pagination system using PHP, so when a page number or next/prev arrow is clicked, it will reload the page. This is why I need to find the active tab before loading the next page, since I"ll just pass it in the url or session, etc.
编辑：这是真正的问题。我有一个使用 PHP 的分页系统，因此当单击页码或下一个/上一个箭头时，它将重新加载页面。这就是为什么我需要在加载下一页之前找到活动选项卡的原因，因为我只会在 url 或 session 等中传递它。
回答by Jo?o Silva
Twitter Bootstrap assigns the activeclass to the lielement that represents the active tab:
Twitter Bootstrap 将active类分配给li代表活动选项卡的元素：
$("ul#sampleTabs li.active")
An alternative is to bind the shownevent of each tab, and save the active tab:
另一种方法是绑定shown每个选项卡的事件，并保存活动选项卡：
var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
activeTab = e.target;
})
回答by Daniel Adenew
Here is the answer for those of you who need a Boostrap 3 solution.
这是为需要 Boostrap 3 解决方案的人提供的答案。
In bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
在引导程序 3 中，在下一行中使用 'shown.bs.tab' 而不是 'shown'
// tab
$('#rowTab a:first').tab('show');
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//show selected tab / active
console.log ( $(e.target).attr('id') );
});
回答by Abdelrahman Aly
First of all you need to remove the data-toggleattribute. We will use some JQuery, so make sure you include it.
首先，您需要删除data-toggle属性。我们将使用一些 JQuery，因此请确保包含它。
<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='#menu2'>Menu 2</a></li>
<li><a href='#menu3'>Menu 3</a></li>
</ul>
<div class='tab-content'>
<div id='home' class='tab-pane fade in active'>
<h3>HOME</h3>
<div id='menu1' class='tab-pane fade'>
<h3>Menu 1</h3>
</div>
<div id='menu2' class='tab-pane fade'>
<h3>Menu 2</h3>
</div>
<div id='menu3' class='tab-pane fade'>
<h3>Menu 3</h3>
</div>
</div>
</div>
<script>
$(document).ready(function(){
// Handling data-toggle manually
$('.nav-tabs a').click(function(){
$(this).tab('show');
});
// The on tab shown event
$('.nav-tabs a').on('shown.bs.tab', function (e) {
alert('Hello from the other siiiiiide!');
var current_tab = e.target;
var previous_tab = e.relatedTarget;
});
});
</script>
