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

jQuery click tab to open and close

本文关键字：单击 选项 jQuery      更新时间：2023-09-26

我有一些用作导航的选项卡，除了一点功能外，它工作正常，默认情况下选项卡是关闭的，只有在单击后才能打开，我想要的是能够再次单击选项卡以关闭包含内容的面板。我知道这可能很容易，但我不是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

两个问题：

1）您只需要从选项卡内容和li元素中.removeClass()，这些内容和li元素不会在当前单击中定位。

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

工作演示

使用此代码 

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;       

    })

})
相关文章：