使用jQuery和Twitter Bootstrap查找Active Tab

前端之家收集整理的这篇文章主要介绍了使用jQuery和Twitter Bootstrap查找Active Tab前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我一直在困扰我的大脑一段时间,现在,我想知道,如果有人知道我如何找到活动标签,使用jQuery和Twitter的Bootstrap。从网址中提取哈希不是我的第一个选项,我在< a>中使用data-toggle属性链接,所以没有必要产生一个URL哈希。

任何洞察力?以下是我的标记示例:

<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等。

编辑:这是真正的问题。我有一个使用PHP分页系统,所以当一个页码或下一个/上一个箭头被点击,它会重新加载页面。这就是为什么我需要在加载下一页之前找到活动选项卡,因为我“只是传递它在url或会话等。

解决方法

Twitter Bootstrap将活动类分配给表示活动选项卡的li元素:
$("ul#sampleTabs li.active")

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

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

猜你在找的jQuery相关文章