使用 jQuery 和 Twitter Bootstrap 查找活动选项卡答案

【问题标题】：Find Active Tab using jQuery and Twitter Bootstrap使用 jQuery 和 Twitter Bootstrap 查找活动选项卡
【发布时间】：2012-08-20 15:42:14
【问题描述】：

我已经绞尽脑汁有一段时间了，我想知道是否有人知道我如何使用 jQuery 和 Twitter 的 Bootstrap 找到活动选项卡。从 URL 中提取哈希不是我的首选，我在 <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 或 session 等中传递它。

【问题讨论】：

标签： jquery tabs twitter-bootstrap

【解决方案1】：

Twitter Bootstrap 将 active 类分配给代表活动标签的 li 元素：

$("ul#sampleTabs li.active")

另一种方法是绑定每个标签的shown事件，并保存活动标签：

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

【讨论】：

没错，但我没有使用他们的标准标签导航。我在侧边栏中的链接不会自动分配 active 类。
@pennstate_fanboy：你不能使用tab()的shown事件并检查e.target吗？
啊哈！谢谢先生，这正是我需要的，我一定在文档中错过了。
@pennstate_fanboy：不客气，很高兴我能帮上忙，我以前用过，所以缩小了搜索范围。 :)
看来 Bootstrap 3 正在使用 'shown.bs.tab' $('a[data-toggle="tab"]').on('shown.bs.tab', function (e ) { ... }); getbootstrap.com/javascript/#tabs

【解决方案2】：

这里是需要 Boostrap 3 解决方案的人的答案。

在 bootstrap 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') );
});

【讨论】：

【解决方案3】：

首先，您需要删除 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>

【讨论】：