Расширение вкладок бутстрапа

Question

Использование последней версии Bootstrap, и я ищу некоторую помощь с вкладками. Вот что я ищу ...

У меня есть ссылка, расположенная в заголовке моего сайта. Когда вы нажмете, зритель перейдет на вкладку «Правила», расположенную в нижней части области содержимого. Вкладка «Правила» должна быть выбрана и готова к работе.

HTML:

<div id="header"> 
    <a href="" title="Rules">Click to read the rules</a> 
</div> <!-- end header --> 

<div id="content"> 
<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a href="#home">Home</a></li> 
    <li><a href="#profile">Profile</a></li> 
    <li><a href="#rules">Rules</a></li> 
    <li><a href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">...</div> 
    <div class="tab-pane" id="profile">...</div> 
    <div class="tab-pane" id="rules">...</div> 
    <div class="tab-pane" id="settings">...</div> 
</div> 
</div> <!-- end content --> 

JS:

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

Answer 1

HTML

<div id="header"> 
    <a href="#" title="Rules">Click to read the rules</a> 
</div> <!-- end header --> 

<div id="content"> 
<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
    <li><a data-toggle="tab" href="#profile">Profile</a></li> 
    <li><a data-toggle="tab" href="#rules">Rules</a></li> 
    <li><a data-toggle="tab" href="#settings">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home">1...</div> 
    <div class="tab-pane" id="profile">2...</div> 
    <div class="tab-pane" id="rules">3...</div> 
    <div class="tab-pane" id="settings">4...</div> 
</div> 
</div> <!-- end content --> 

JS

$('#header a').click(function(e) { 
    e.preventDefault(); 
    $('#myTab a[href="#rules"]').tab('show'); 
}); 

Fiddle

http://jsfiddle.net/fWV7Z/

Answer 2

Попробуйте это:

$('#header a').click(function(e) { 
    e.preventDefault(); 
    $('#rules').tab('show'); // or $('#rules').click(); 
});