使用 jQuery 和 Twitter Bootstrap 查找活动选项卡 [英] Find Active Tab using jQuery and Twitter Bootstrap

问题描述

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

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 Bootstrap 将 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屋！