同じページに複数のjqueryタブがある

Question

jqueryタブについては本当に助けが必要です。私は質問したい質問に答えを見つけましたが、ほとんどのjqueryタブではナビゲーション用に「a」タグを使用していましたが、「a」タグなしで作業する時間を費やしました。私は非常に正当な理由でそれをそのままにしておきたい。

ここに私の質問です。私は非常にうまく動作するjqueryタブを持っています。しかし、同じページに複数のタブを配置しようとすると、互いに矛盾します。

ここにjsfiddleへのリンクがあります。私はjqueryコードを複製し、2番目のタブに適合するようにIDとクラスを変更しようとしましたが、動作させることができませんでした。

私のホームページに5つのコンテンツセクションがあり、セクション2と5にタブがあることを想像してください。ここで

#tabs-nav-wrap {padding:10px 0; text-align: center;} 
#tabs-nav-wrap ul {display: inline-block; list-style: none;} 

#tabs-nav-wrap ul li { 
    list-style: none; 
    display: inline-block; 

    margin:0 3px; 
} 
#tabs-nav li { 
    list-style: none; 
    display: block; 
    padding:10px 20px; 
    background: #736565; 
    font-size: 16px; 
    font-weight: 300; 
    cursor: pointer; 
    color: #fff; 
    text-align: left; 
    text-decoration: none; 
    border:1px solid #615656; 
} 

#tabs-nav .tab-nav-link.current, 
#tabs-nav .tab-nav-link:hover { 
    border:1px solid #5eaace; 
    background: #74c1e4; 
} 

.tab-content {padding:20px 0; text-align: center;} 

をHTMLです：：

はここにCSSだ、私は本当にいくつかの助けが必要

$(function() { 
    $('.tab-content:not(:first)').hide(); 
    $('#tabs-nav .tab-nav-link').bind('click', function(e) { 
    $this = $(this); 
    $target = $($this.data("target")); // get the target from data attribute 
    $('#tabs-nav .tab-nav-link.current').removeClass('current'); 
    $('.tab-content:visible').fadeOut("fast", function() { 
     $this.addClass('current'); 
     $target.fadeIn("fast"); 
    }); 
    }).filter(':first').click(); 
}); 

：

<div id="tabs-nav-wrap"> 
     <ul id="tabs-nav"> 
      <li class="tab-nav-link" data-target="#tab-one">TAB 1</li> 
      <li class="tab-nav-link" data-target="#tab-two">TAB 2</li> 
      <li class="tab-nav-link" data-target="#tab-three">TAB 3</li>   
     </ul> 
     <div style="clear:both;"></div> 
    </div><!-- ends tabs-nav-wrap -->  


<div class="tabs-main-content"> 

     <div id="tab-one" class="tab-content"><!-- Begins tab-one --> 
     <div class="tab-inner"> 
      <p>Tab 1 content here.</p> 
     </div> 
     </div> 

     <div id="tab-two" class="tab-content"><!-- Begins tab-two --> 
     <div class="tab-inner"> 
      <p>Tab 2 content here.</p> 
     </div> 
     </div> 

     <div id="tab-three" class="tab-content"><!-- Begins tab-three --> 
     <div class="tab-inner"> 
      <p>Tab 3 content here.</p> 
     </div> 
     </div>  

    <div style="clear:both;"></div> 
    </div><!-- # tabs-main-content -->  

はここに私のjqueryのコードは次のようになります。前もって感謝します！

Answer 1

idの代わりにclassを使用すると、それらは一意のセレクタであり、同じコードで複数のタブを処理する必要があります。 siblings()を使用して、アクティブな要素ではないクラスを非表示または削除します。ここが更新されましたfiddle