首页 文章

使用jQuery和Twitter Bootstrap查找Active Tab

提问于
浏览 次
51

我'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 . 从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

3 回答

  • 23

    Twitter Bootstrap将 active 类分配给表示活动选项卡的 li 元素：

    $("ul#sampleTabs li.active")

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

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

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

    In bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line

    // 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') );
});
    回复于
  • 2

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

相关问题