微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

使用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;
})

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐