javascript - jQuery点击标签打开和关闭

Question

我有一些选项卡用作导航，除了一些功能外它工作正常，这些选项卡默认关闭并且只有在单击后才会打开，我想要的是能够再次单击选项卡关闭包含内容的面板。我知道这可能真的很容易，但我不是 jQuery 开发人员，所以我有点吃力。

这是 Javascript:

$(document).ready(function () {
$('ul.tabs li').click(function () {
var tab_id = jQuery(this).attr('data-tab');

$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');

$(this).addClass('current');
$("#" + tab_id).addClass('current');

})

})

您可以看到完整的工作标签 JSFiddle

Answer 1

两个问题:

1) 您只需要从选项卡内容和 li 元素中 .removeClass()，它们不会成为当前点击的目标。

2) 使用 .toggleClass() 而不是 .addClass()

jQuery(document).ready(function () {
jQuery('ul.tabs li').click(function () {
    var tab_id = jQuery(this).attr('data-tab');

    jQuery('ul.tabs li').not('[data-tab='+tab_id+']').removeClass('current');
    jQuery('.tab-content:not(#'+tab_id+')').removeClass('current');

    jQuery(this).toggleClass('current');
    jQuery("#" + tab_id).toggleClass('current');
});

Working Demo