63

私はしばらく頭を悩ませてきましたが、jQueryとTwitterのBootstrapを使用して、アクティブなタブを見つける方法を誰かが知っているかどうかを知りたいと思います。URLからハッシュを取得することは私の最初のオプションではありません。リンクでdata-toggle属性を使用して<a>いるため、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やセッションなどでタブを渡すだけだからです。

4

3 に答える 3

111

Twitter Bootstrapは、アクティブなタブを表す要素にactiveクラスを割り当てます。li

$("ul#sampleTabs li.active")

別の方法は、各タブのイベントをバインドしshown、アクティブなタブを保存することです。

var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
  activeTab = e.target;
})
于 2012-08-20T15:45:10.810 に答える
32

Boostrap3ソリューションが必要な方への回答は次のとおりです。

ブートストラップ3では、次の行の「shown」の代わりに「shown.bs.tab」を使用します

// 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') );
});
于 2015-03-24T07:09:10.380 に答える
7

まず、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>
于 2017-05-02T11:48:40.733 に答える