-1

ナビゲーション ボタン ボタンの複数のグループを使用して、単一のタブ ペインを制御したいと思います。現在、別のナビゲーション グループで新しいナビゲーションがアクティブ化されても、以前のナビゲーションは非アクティブ化されません。したがって、常に 2 つのナビゲーション ボタンがアクティブになります。

最初のナビゲーション メニュー:

<!-- Nav Menu 1 -->             
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
                <li><a href="#tab-2" data-toggle="tab">TAB TWO</li>
                <li><a href="#tab-3" data-toggle="tab">TAB THREE</li></ul>

2 番目のナビゲーション メニュー:

 <!-- Nav Menu 2 -->                
            <ul class="nav nav-pills nav-stacked" id="myTab"> 
                <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
                <li><a href="#tab-5" data-toggle="tab">TAB FIVE</li>
                <li><a href="#tab-6" data-toggle="tab">TAB SIX</li> </ul>

そしてタブパネル:

<div class="tab-content" id="myTab">
   <div class="tab-pane fade in active" id="tab-1">
       <p>TAB ONE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-2">
       <p>TAB TWO CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-3">
       <p>TAB THREE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-4">
       <p>TAB FOUR CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-5">
       <p>TAB FIVE CONTENT</p>
   </div>
   <div class="tab-pane fade in active" id="tab-6">
       <p>TAB SIX CONTENT</p>
   </div>

繰り返しますが、ボタンはタブ パネルを正しく制御しますが、他の Nav div から 1 つをクリックしても、前の Nav ボタンは無効になりません。

4

1 に答える 1

0

質問から私が理解したところによると、class="active"グループ 2 をクリックした場合はグループ 1 からのリンクを削除する必要があり、その逆も同様でした。私はこれを素早く汚いJavascript関数を使って達成しました：

HTML:

<ul class="nav nav-pills nav-stacked" id="tabGroupOne"> 
  <li class="active"><a href="#tab-1" data-toggle="tab">TAB ONE</a></li>
  <li><a href="#tab-2" data-toggle="tab">TAB TWO</a></li>
  <li><a href="#tab-3" data-toggle="tab">TAB THREE</a></li>
</ul> 

<ul class="nav nav-pills nav-stacked" id="tabGroupTwo"> 
  <li><a href="#tab-4" data-toggle="tab">TAB FOUR</a></li>
  <li><a href="#tab-5" data-toggle="tab">TAB FIVE</a></li>
  <li><a href="#tab-6" data-toggle="tab">TAB SIX</a></li> 
</ul>

Javascript/jQuery:

$("#tabGroupTwo").children().click(function(e){
  $("#tabGroupOne").children().each(function(f){
    $(this).removeClass("active");
  });
});

$("#tabGroupOne").children().click(function(e){
  $("#tabGroupTwo").children().each(function(f){
    $(this).removeClass("active");
  });
});

基本的に、<li>リスト 1 の項目をクリックすると、グループ 2 のリンクのアクティブなクラスが削除されます。グループ 2 のいずれかのリンクをクリックすると、その逆になります。

ul class="nav nav-pills"別の方法は、リンクがクリックされるたびに他のすべての子を無効にすることですが、ナビゲーションを最大 2 つに維持する限り、上記で十分です。

マークアップの問題もいくつかあったことに注意してくださいhtml。複数の ID と</a>タグの欠落です。これらは、コードの動作がおかしくなる原因にもなります。

作業バージョンは次のとおりです。

ブートプライ

于 2015-02-13T19:03:20.287 に答える