内容と一緒にブートストラップタブを使用する最も良い方法

Question

私は、クリックするとその内容でナビゲーションバーを作成しようとしています。私のコードは、駄目のように見えます。私のコードを短くする方法はありますか？

例えば：部屋をクリックすると、jQueryの#nav-hotelにactiveクラスを追加し、他のli要素からactiveクラスを削除します。また、visibilityとdisplayをそれ自身と他のものの両方に設定します。

HTML：

<ul class="nav nav-tabs"> 
       <li id="nav-hotel" role="presentation"><a href="#tab-hotel">Rooms</a></li> 
       <li id="nav-flight" role="presentation"><a href="#tab-flight">Flights</a></li> 
       <li id="nav-restaurant" role="presentation"><a href="#tab-restaurant">Restaurants</a></li> 
      </ul> 
      <div class="tab-content"> 
       <div id="tab-hotel">hotel</div> 
       <div id="tab-flight">flight</div> 
       <div id="tab-restaurant">restaurant</div> 
      </div> 

はJQuery：

$("#nav-hotel").click(function() { 
     $("#nav-hotel").toggleClass("active"); 
     $("#tab-hotel").css("display", "block"); 
     $("#tab-hotel").css("visibility", "visible"); 
     $("#nav-flight").removeClass("active"); 
     $("#tab-flight").css("display", "none"); 
     $("#tab-flight").css("visibility", "hidden"); 
     $("#nav-restaurant").removeClass("active"); 
     $("#tab-restaurant").css("display", "none"); 
     $("#tab-restaurant").css("visibility", "hidden"); 
    }); 
    $("#nav-flight").click(function() { 
     $("#nav-flight").toggleClass("active"); 
     $("#tab-flight").css("display", "block"); 
     $("#tab-flight").css("visibility", "visible"); 
     $("#nav-hotel").removeClass("active"); 
     $("#tab-hotel").css("display", "none"); 
     $("#tab-hotel").css("visibility", "hidden"); 
     $("#nav-restaurant").removeClass("active"); 
     $("#tab-restaurant").css("display", "none"); 
     $("#tab-restaurant").css("visibility", "hidden"); 
    }); 
    $("#nav-restaurant").click(function() { 
     $("#nav-restaurant").toggleClass("active"); 
     $("#tab-restaurant").css("display", "block"); 
     $("#tab-restaurant").css("visibility", "visible"); 
     $("#nav-flight").removeClass("active"); 
     $("#tab-flight").css("display", "none"); 
     $("#tab-flight").css("visibility", "hidden"); 
     $("#nav-hotel").removeClass("active"); 
     $("#tab-hotel").css("display", "none"); 
     $("#tab-hotel").css("visibility", "hidden"); 
    }); 

Answer 1

あなたは= "タブ" のデータトグルを使用してみましたか？私は最近、bootstrap.min.js、jquery.min.js、bootstrap.min.cssを組み込み、タブに印を付けることで、javascriptなしの同様の例を作成しました。

まず、データトグルを使用して "" アイテムをマーク= "タブ"

<li id="nav-hotel" role="presentation"> 
    <a href="#tab-hotel" data-toggle="tab">Rooms</a> 
</li> 

第二に、あなたのクラス= "タブペイン" でdivのコンテンツ項目をマーク

<div id="tab-hotel" class="tab-pane">hotel</div> 

最後にデフォルトの有効なタブを追加するにはアクティブなクラスをdivの1つに追加します

<div id="tab-hotel" class="tab-pane active">hotel</div>