Bootstrap Nav-tab show hideコンテンツ

Question

RailsとJSを学ぶために構築しているアプリでは、タブナビゲーションを使いたいです。

これは、3つのセクションを指し示す私のタブナビゲーションです。 JavaScriptを作成しようとしています。どのように私はタブをクリックし、それぞれのセクションを表示しながらクリックした<li>にアクティブなクラスを設定するとこれにアプローチですか？

getElementByIdほどはできません。だから、私はこの構造のような何かが必要です：

$("li.presentation").on("click", function(event) { ... 
    $(...).class("active"); 
    $(...).toggle(); 
}; 

すべての助けに感謝！

<nav> 
    <ul class="nav nav-tabs"> 
    <li role="presentation" class="active"><a href="#tab1">Details</a></li> 
    <% unless @annotation.new_record? %> 
    <li role="presentation"><a href="#tab2">Tags</a></li> 
    <li role="presentation"><a href="#tab2">Comments</a></li> 
    <% end -%> 
    </ul> 
</nav> 

セクション

<section id="tab1" class="tab1"> 
    <p>Section 1 content here </p> 
</section> 
<section id="tab2" class="tab2"> 
    <p>Section 2 content here </p> 
</section> 
<section id="tab3" class="tab3"> 
    <p>Section 1 content here </p> 
</section> 
<section id="tab3" class="tab3"> 
    <p>Section 3 content here </p> 
</section> 

これは、あなたがこれを達成するためにJavaScriptとCSSを使用する必要はありません、私のCSS

.tab1 { 
    display: block; 
} 

.tab2 { 
    display: none; 
} 

.tab3 { 
    display: none; 
} 

Answer 1

です。タブのアンカーに組み込まれたdata-toggle="tab"属性を使用できます。ここで

<div class="container"> 
    <ul class="nav nav-tabs"> 
     <!-- add data-toggle attribute to the anchors --> 
     <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
     <li><a data-toggle="tab" href="#menu1">Menu 1</a></li> 
     <li><a data-toggle="tab" href="#menu2">Menu 2</a></li> 
    </ul> 
     <div class="tab-content"> 
     <div id="home" class="tab-pane fade in active"> 
     <h3>HOME</h3> 
     <p>Some content.</p> 
     </div> 
     <div id="menu1" class="tab-pane fade"> 
     <h3>Menu 1</h3> 
     <p>Some content in menu 1.</p> 
     </div> 
     <div id="menu2" class="tab-pane fade"> 
     <h3>Menu 2</h3> 
     <p>Some content in menu 2.</p> 
     </div> 
    </div> 
</div> 

はライブデモです：
http://www.bootply.com/ZSu8N3bB03