異なるdiv idを持つjQueryマルチプルトグルボタン

Question

私は4つの異なるdivと4つのボタンを持っていますが、jQueryを使ってタブ付きコンテンツを作成しようとしていますが、正しく動作させることはできません。私は次のボタンをクリックすると

jsfiddle.net

jQuery(document).ready(function() { 
jQuery('#tabInteract .buttons a').click(function() { 
    var index = jQuery(this).index(); 
    if(jQuery(this).hasClass('active')) { 
    jQuery(this).removeClass('active'); 
    jQuery('#' + jQuery(this).data('tab')).toggleClass(true); 
    } else { 
     jQuery('#tabInteract .buttons a').removeClass('active'); 
    jQuery(this).addClass('active') 
    jQuery('#' + jQuery(this).data('tab')).toggleClass(true); 
    } 
}) 
}); 

それは以前のdivを閉じdoesntの。 ご迷惑をおかけして申し訳ございません。

Answer 1

この動作を実現するには、アクティブなボタンの状態を、関連するタブとともにトグルする必要があります。他のすべてのタブは隠し、他のボタンからアクティブなクラスを削除します。これを試してみてください：

$('#tabInteract .buttons a').click(function() { 
 
    var $button = $(this).toggleClass('active'); 
 
    $('#tabInteract .buttons a').not($button).removeClass('active'); 
 

 
    var $tab = $('#' + $(this).data('tab')).toggle(); 
 
    $('.closable_box').not($tab).hide(); 
 
})

a { 
 
    display: inline; 
 
    margin: 5px; 
 
    color: #000; 
 
} 
 
a.active { 
 
    color: red; 
 
} 
 
.closable_box { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tabInteract"> 
 
    <div class="buttons"> 
 
    <a data-tab="sports" href="#">Button A</a> 
 
    <a data-tab="cars" href="#">Button B</a> 
 
    <a data-tab="fruits" href="#">Button C</a> 
 
    <a data-tab="cats" href="#">Button D</a> 
 
    </div> 
 
</div> 
 

 
<div class="closable_box" id="sports"> 
 
    Sports 
 
</div> 
 
<div class="closable_box" id="cars"> 
 
    Cars 
 
</div> 
 
<div class="closable_box" id="fruits"> 
 
    Fruits 
 
</div> 
 
<div class="closable_box" id="cats"> 
 
    Cats 
 
</div>