jQueryでタブ内の要素を動的に非表示にする

Question

前に、タブセットが1つしかないときのための機能を開発しました。今度はaAppが成長しており、タブのセットが増えているため、タブの機能に問題があります。

機能は、このようなものだった最初の時間：

var iconTabs = function() { 

    $('#icons-tabs a:not(:first)').addClass('inactive'); 
    $('.icons-container').hide(); 
    $('.icons-container:first').show(); 

    $('#icons-tabs a').click(function(){ 
     var t = $(this).attr('id'); 
     if($(this).hasClass('inactive')) { 
      $('#icons-tabs a').addClass('inactive'); 
      $(this).removeClass('inactive'); 
      $('.icons-container').hide(); 
      $('#'+ t + 'C').fadeIn('slow'); 
     } 
    }); 
}; 

とHTML：今

<div id="fragment-1" class="fragments text-center"> 
    <div class="icons-container" id="tab1C"> 
     {{!-- Content --}} 
    </div> 

    <div class="icons-container" id="tab2C"> 
     {{!-- Content --}} 
    </div> 

    <div class="fragments-parent"> 
     <div class="fragments-icons fragments-parent--child"> 
      <div class="items" id="icons-tabs"> 
       <a href="#" class="item" id="tab1"></a> 
       <a href="#" class="item" id="tab2"></a> 
       <a href="#" class="item" id="tab3"></a> 
       <a href="#" class="item" id="tab4"></a> 
      </div> 
     </div> 
    </div> 
</div> 

今のhtmlが第二のセクションを持っていると私はまだ3以上を追加する必要があり、それこのようなものです：

<div id="fragment-1" class="fragments text-center"> 
    <div class="icons-container" id="tab1C"> 
     {{!-- Content --}} 
    </div> 

    <div class="icons-container" id="tab2C"> 
     {{!-- Content --}} 
    </div> 

    <div class="fragments-parent"> 
     <div class="fragments-icons fragments-parent--child"> 
      <div class="items" id="icons-tabs"> 
       <a href="#" class="item" id="tab1"></a> 
       <a href="#" class="item" id="tab2"></a> 
      </div> 
     </div> 
    </div> 
</div> 

<div id="fragment-2" class="fragments text-center"> 
    <div class="icons-container" id="tab5C"> 
     {{!-- Content --}} 
    </div> 

    <div class="icons-container" id="ta62C"> 
     {{!-- Content --}} 
    </div> 

    <div class="fragments-parent"> 
     <div class="fragments-icons fragments-parent--child"> 
      <div class="items" id="icons-tabs"> 
       <a href="#" class="item" id="tab5"></a> 
       <a href="#" class="item" id="tab6"></a> 
      </div> 
     </div> 
    </div> 
</div> 

私はあなたがプレイしたい場合にはJSFiddleを作成しました：

http://jsfiddle.net/ju3a9zx5/

私の使命は動的であり、タブのすべてのセットは別個の動作をすることです。 JSFiddleで見られるように、2番目のタブは機能しません。最初のタブと同じ動作をしたいが、別のタブのセットは他のタブと干渉する必要はありません。

Answer 1

タブをターゲットにするには、idの代わりにクラスを使用します。

1. 私はclass="tabs"
2. でid="tabs"とid="tabs2"を交換し、関連を見つけたとき、私が代わりにIDS
3. のクラスを対象とするイベントハンドラを変更：あなたは以下の私の例を参照した場合、唯一のいくつかの変更があります示すとき、私はDOM
4. で下にコンテナを見つけるために.nextUntil()を使っ関連.containerを見つけた場合aタグは私が
5. siblings()を使用します初期コンテナクラス。私は、[OK]をあなたのフィドルと遊ん$('.tabs').next('.container')

$(document).ready(function() { 
 

 
    $('.tabs a:not(:first)').addClass('inactive'); 
 
    $('.container').hide(); 
 
    $('.tabs').next('.container').show(); 
 

 
    $('.tabs a').click(function() { 
 
    var t = $(this).attr('id'); 
 
    if ($(this).hasClass('inactive')) { //this is the start of our condition 
 
     $(this).siblings('a').addClass('inactive'); 
 
     $(this).removeClass('inactive'); 
 

 
     $(this).parent().nextUntil(':not(.container)').hide(); 
 
     $('#' + t + 'C').fadeIn('slow'); 
 
    } 
 
    }); 
 

 
});

.tabs { 
 
    width: 100%; 
 
    height: 30px; 
 
    border-bottom: solid 1px #CCC; 
 
    padding-right: 2px; 
 
    margin-top: 30px; 
 
} 
 

 
a { 
 
    cursor: pointer; 
 
} 
 

 
.tabs a { 
 
    float: left; 
 
    list-style: none; 
 
    border-top: 1px solid #ccc; 
 
    border-left: 1px solid #ccc; 
 
    border-right: 1px solid #ccc; 
 
    margin-right: 5px; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
    outline: none; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: small; 
 
    font-weight: bold; 
 
    color: #5685bc; 
 
    ; 
 
    padding-top: 5px; 
 
    padding-left: 7px; 
 
    padding-right: 7px; 
 
    padding-bottom: 8px; 
 
    display: block; 
 
    background: #FFF; 
 
    border-top-left-radius: 3px; 
 
    border-top-right-radius: 3px; 
 
    text-decoration: none; 
 
    outline: none; 
 
} 
 

 
.tabs a.inactive { 
 
    padding-top: 5px; 
 
    padding-bottom: 8px; 
 
    padding-left: 8px; 
 
    padding-right: 8px; 
 
    color: #666666; 
 
    background: #EEE; 
 
    outline: none; 
 
    border-bottom: solid 1px #CCC; 
 
} 
 

 
.tabs a:hover, 
 
.tabs a.inactive:hover { 
 
    color: #5685bc; 
 
    outline: none; 
 
} 
 

 
.container { 
 
    clear: both; 
 
    width: 100%; 
 
    border-left: solid 1px #CCC; 
 
    border-right: solid 1px #CCC; 
 
    border-bottom: solid 1px #CCC; 
 
    text-align: left; 
 
    padding-top: 20px; 
 
} 
 

 
.container h2 { 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    margin-bottom: 10px; 
 
    color: #5685bc; 
 
} 
 

 
.container p { 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    margin-top: 10px; 
 
    margin-bottom: 10px; 
 
    line-height: 1.3; 
 
    font-size: small; 
 
} 
 

 
.container ul { 
 
    margin-left: 25px; 
 
    font-size: small; 
 
    line-height: 1.4; 
 
    list-style-type: disc; 
 
} 
 

 
.container li { 
 
    padding-bottom: 5px; 
 
    margin-left: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="tabs"> 
 

 
    <a id="tab1">test1</a> 
 
    <a id="tab2">test2</a> 
 
    <a id="tab3">test3</a> 
 
    <a id="tab4">test4</a> 
 

 
</div> 
 
<div class="container" id="tab1C">1Some content</div> 
 
<div class="container" id="tab2C">2Some content</div> 
 
<div class="container" id="tab3C">3Some content</div> 
 
<div class="container" id="tab4C">4Some content</div> 
 

 
<div class="tabs"> 
 

 
    <a id="tab5">test1</a> 
 
    <a id="tab6">test2</a> 
 
    <a id="tab7">test3</a> 
 
    <a id="tab8">test4</a> 
 

 
</div> 
 
<div class="container" id="tab5C">5Some content</div> 
 
<div class="container" id="tab6C">6Some content</div> 
 
<div class="container" id="tab7C">7Some content</div> 
 
<div class="container" id="tab8C">8Some content</div>

Answer 2

を使用しています。最初の発言：id="tabs"をclass="tabs"に変更して、javascriptとcssのセレクタも変更してください。その変更によって、それはあなたを稼働させるはずです。

私はjQueryプラグインを作成し、each()関数でコードをスローして、より柔軟でスケーラブルでメンテナンス性を向上させました。