2013-11-03 22 views
7

現在のタブをBOOTSTRAPで有効にして表示します。JSから現在のアクティブなタブを取得します。

<ul class="nav nav-tabs">    
    <!-- Default tab --> 
    <li class="active"><a href="#elemLower_tab" data-toggle="tab">Elementary Lower</a></li> 
    <li><a href="#elemAdvance_tab" data-toggle="tab">Elementary Advance</a></li> 
    <li><a href="#secondary_tab" data-toggle="tab">Secondary</a></li>    
</ul> 

jQueryで現在のタブを有効にしたいですか?これを行う方法はありますか?

答えて

29

がこのコードを使用しJS

$('.nav-tabs .active').text() 
+0

タブをクリックしたときにクラスが変更されたことはわかりませんでした。これは本当に私が必要なものです。ありがとう。 – newbie

+12

目的地のIDを取得する場合は、$( '。nav-tabs .active> a')を使用します。attr( 'href') – chok68

0

を試してみてください。

$(function(){ 
var url = window.location.pathname, 
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); 
$('ul.nav-tabs li a').each(function(){ 
if(urlRegExp.test(this.href.replace(/\/$/,''))){ 
$(this).addClass('active'); 
} 
}); 
}); 

使用CSS:あなたはいつでも現在のタブの変更JavaScriptコードを実行したい場合は

ul.nav-tabs a.active{color:#000;} 
+0

彼はクラスを設定したくないので、アクティブクラス。 – FabianCook

0

にアクティブクラスを取り付け、tabs plugin documentationshowshownイベントを参照してください。

関連する問題