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

Answer 2

使用此代码

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

        if(tab_id != el){
          jQuery(this).addClass('current');
        jQuery("#" + tab_id).addClass('current'); 
        }

       el = tab_id;       



    })



})

jQuery单击选项卡以打开和关闭

2 个答案: