92

次のコードがあります。

<ul class="nav nav-tabs">
    <li><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>

そして、次のスクリプト:

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.tab-pane a[href="#' + tab + '"]').tab('show');
};

この場合、ページの準備が整うと、2 番目のタブがアクティブになりますが、行に常に JavaScript エラーが表示されます$('.tab-pane a[href="#' + tab + '"]').tab();

誰か助けてくれませんか？

4

7 に答える 7

196

からのセレクターの適用が機能して.nav-tabsいるようです:このデモを参照してください。

$(document).ready(function(){
    activaTab('aaa');
});

function activaTab(tab){
    $('.nav-tabs a[href="#' + tab + '"]').tab('show');
};

ページをロードする前に必要なタブがわかっている場合は、おそらくページの html を変更し、この特定のタスクに JS を使用しないでください。

私も彼の答えのためにデモを微調整しました。

（これがうまくいかない場合は、ブラウザ、環境などの設定を指定してください）

于 2013-07-24T10:30:42.567 に答える
26

ページの準備ができたら、タブ アンカーへのリンクをクリックします。

$('a[href="' + window.location.hash + '"]').trigger('click');

またはバニラJavaScriptで

document.querySelector('a[href="' + window.location.hash + '"]').click();
于 2013-11-10T09:31:13.640 に答える
11 
<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active"><a href="#aaa" data-toggle="tab">AAA</a></li>
    <li><a href="#bbb" data-toggle="tab">BBB</a></li>
    <li><a href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane fade active in" id="aaa">...Content...</div>
    <div class="tab-pane" id="bbb">...Content...</div>
    <div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>

ページの読み込み後にアクティブにしたいli要素にactiveクラスを追加します。また、アクティブなクラスをコンテンツ div に追加する必要があります。フェードイン クラスはスムーズな移行に役立ちます。

于 2013-07-24T10:21:04.253 に答える