jQuery multipple切換按鈕與不同的div ID

Question

我有4個不同的div和4個按鈕，我試圖創建一個使用jQuery的標籤式內容，但我無法讓它工作正確。所以，我已經使用了data-tab屬性。

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); 
    } 
}) 
}); 

當我點擊下一步按鈕它不關閉之前的股利。 任何幫助非常感謝。

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>