使用jQuery和Twitter引导查找活动选项卡

我绞尽脑汁想了一会儿，我想知道是否有人知道我如何使用jQuery和Twitter的引导功能找到活动选项卡。从URL中提取哈希不是我的第一个选择，我正在使用

示例选项卡
$（'a:first'）.tab（'show'）；

我愿意接受任何建议——使用PHP会话、JS cookie等

---

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

Twitter引导将

active

类分配给表示活动选项卡的

li

元素：

$("ul#sampleTabs li.active")

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

另一种方法是绑定每个选项卡的

显示的
事件，并保存活动选项卡：

$("ul#sampleTabs li.active")

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

以下是那些需要Boostrap 3解决方案的人的答案

在bootstrap 3中，使用“show.bs.tab”而不是下一行中的“show”

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

首先，您需要删除数据切换属性。我们将使用一些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>







家
菜单1
菜单2
菜单3
$（文档）.ready（函数（）{
//手动处理数据切换
$（'.nav选项卡a'）。单击（函数（）{
$（this.tab（'show'）；
});
//事件上显示的选项卡
$（'.nav tabs a'）.on（'show.bs.tab'，函数（e）{
警报（“来自另一个SiiIide的你好！”）；
var current_tab=e.target；
var previous_tab=e.相关目标；
});
});
True，但我没有使用他们的标准选项卡导航。我在侧栏中有链接，不会自动分配
活动的
类。@pennstate\u fanboy:你不能使用
选项卡（）的
事件吗
并检查
e.target
？啊哈！谢谢你，先生，这正是我所需要的，我一定在文档中遗漏了它。@pennstate_fanboy:不用谢，很高兴我能帮上忙，我以前用过它，所以搜索范围缩小了一点。：）Bootstrap 3似乎在使用'show.bs.tab'$（'a[data toggle=“tab”]）。on（'show.bs.tab'，函数（e）{ ... });