使用jQuery和Twitter Bootstrap查找活动标签 [英] Find Active Tab using jQuery and Twitter Bootstrap

问题描述

我已经绞尽脑汁了一段时间，我想知道是否有人知道如何使用jQuery和Twitter的Bootstrap找到活动标签.从URL提取哈希值不是我的第一选择，我在<a>链接中使用了data-toggle属性，因此不需要产生URL哈希值.

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-toggle attribute in the <a> link so there is no need to produce a URL hash.

有见识吗?这是我的标记示例:

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>

我愿意接受任何建议-使用PHP会话，JS cookie等.

I'm open to any suggestion - using a PHP session, JS cookie, etc.

这是真正的问题.我有一个使用PHP的分页系统，因此当单击页码或下一个/上一个箭头时，它将重新加载页面.这就是为什么我需要在加载下一页之前找到活动选项卡的原因，因为我只会在url或会话等中传递它.

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.

推荐答案

Twitter引导程序将active类分配给表示活动选项卡的li元素:

Twitter Bootstrap assigns the active class to the li element that represents the active tab:

$("ul#sampleTabs li.active")

另一种方法是绑定每个选项卡的shown事件，并保存活动的选项卡:

An alternative is to bind the shown event of each tab, and save the active tab:

var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
  activeTab = e.target;
})

这篇关于使用jQuery和Twitter Bootstrap查找活动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！