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>