web-dev-qa-db-ja.com

data-toggle = "tab"、ページの読み込み時に2番目のタブをアクティブにする

私はこの質問がすでに尋ねられていることを知っています、私は前の質問を通り抜けました、しかしどういうわけか私には何もうまくいかなかったので私はこれを投稿するべきだと思いました。

ページの読み込み時に2番目のタブを強調表示したいのですが、特定のボタンがクリックされたときに最初のタブを強調表示したいと思います。

2番目のタブのクラスを「タブペインアクティブ」として設定しても機能しません。

<ul class="nav nav-tabs">
    <li><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
    <li><a href="#info" data-toggle="tab">More Info</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="search">...Content...</div>
    <div class="tab-pane active" id="home">...Content...</div>
    <div class="tab-pane" id="info">...Content...</div>
</div>
jquerytwitter-bootstraptabs
7
user2598808

2番目のタブペインにアクティブなクラスがあり、最初はそれを示していますが、実際のタブliには示していません。したがって、2番目のタブのコンテンツは表示されますが、タブで選択された状態は表示されません。変更する必要があります：

_<li><a href="#home" data-toggle="tab">User Details</a></li>
_

に

_<li class="active"><a href="#home" data-toggle="tab">User Details</a></li>
_

そして、jQueryでタブを選択するには：

_// To select the first tab
$('.nav-tabs li:first-child a').tab('show'); 
// To select the second tab
$('.nav-tabs li:eq(1) a').tab('show'); 
_

必要に応じて（$(document).ready()内または使用しているものであれば）、ページの読み込み時にこれを使用できますが、マークアップを修正するのがおそらく最善です。イベントリスナー内でボタンに使用できます。

この例を参照してください： http://www.bootply.com/kkmcecadLb

11
Josh Davenport