web-dev-qa-db-ja.com

bootstrap data-toggle = "tab"-JS呼び出しでタブをアクティブにする方法

ブートストラップdata-toggle = "tab"機能を使用するJSPページがあります。ページの読み込み時に、1つのタブをアクティブにします。

<ul class="nav st-nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li>
    <li><a href="#tab2" data-toggle="tab">Second Tab</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="tab1"></div>
    <div class="tab-pane active" id="tab2"></div>
</div>

ページにHighchartsチャートがあります。ユーザーが列の1つをクリックするたびに、tab2をページ上のアクティブなタブにするJS関数を呼び出します。この関数の中で、いくつかの異なるコマンドを試しましたが、どれも動作しないようです。私はjQueryを初めて使用するので、構文のどこが間違っているのか誰かが指摘できるといいのですが。

function handleClick(){
    //I've tried the following, none seem to work
    $('#tab2').toggleClass('active');
    $('#tab2').show();
    $('#tab2').tab('show');
}
javascriptjquerytwitter-bootstraphighcharts
9
180cl

まず、タブにidを指定する必要があります。これをmyTabsと呼びます。

<ul class="nav st-nav-tabs" id="myTabs">

次に、タブを呼び出して名前で表示し、タブを表示できます。

$('#myTabs a[href="#name"]').tab('show');

ブートストラップの documentation でタブについて読むことができます。

17
Jordan.J.D