Question

我正在尝试让此脚本具有可切换的标签。从现在开始，所有内容都是隐藏的，然后当我点击一个标签按钮时，会显示该标签内容。

如果我再次点击相同的标签，我会希望它隐藏内容。

这是我到目前为止所做的：

$('div.tabs a').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('div.tabs a').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
})

我试图让它发挥作用，但是每按一次按钮就会移除'当前'类，所以它总是会隐藏。

$('div.tabs a').click(function(){
    if ( $("div.tabs a").hasClass("current") ) {
        $('div.tabs a').removeClass('current');
        $('.tab-content').removeClass('current')};
    else (
        var tab_id = $(this).attr('data-tab');
        $('div.tabs a').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    )
})

这是一个小提琴：http://jsfiddle.net/bL90n9o8/

//编辑

添加到'if'语句的末尾，看看当它有'.close'类时是否可以这样做，它会使标签无法关闭，但这不起作用。

我要做的是让它查找两个类，然后单击选项卡关闭它。如果它没有这两个类，它将不会关闭选项卡。希望我能够很好地解释自己。

$('div.tabs a').click(function () {
    if($(this).hasClass('current') && $(this).hasClass('close')){ // Added new code to the end
    //if($(this).is('.current, .close')){ // Or maybe something like this? But this does not work.
        $('div.tabs a').removeClass('current');
        $('.content').removeClass('current');        
    }else{    
     var tabid = $(this).attr('data-content');
     //var tabid = $(this).data('content'); //You can use this line instead of above line as well
     $('div.tabs a').removeClass('current');
     $('.content').removeClass('current');
     $(this).addClass('current');
     $("#" + tabid).addClass('current');
 }    
});

Answer 1

您需要检查与点击链接相关的div是否已经包含current类，如果是，请隐藏它而不是显示它：

$('div.tabs a').click(function (e) {
    e.preventDefault();
    var tabid = $(this).attr('href');
    var hasClass = $(tabid).hasClass('current');

    $('div.tabs a, .content').removeClass('current');
    !hasClass && $(this).add(tabid).addClass('current');
})

Updated Fiddle

另请注意，我删除了tdata属性，因为它无效，而是使用href链接相关的div。

Answer 2

您也可以尝试这样做。如前所述，您必须检查类current是否存在已点击的标签，然后将其删除，否则将类current添加到其中。

<强> HTML

<div class="tabs">
    <a class="tab-link" data-content="tab-1">tab1</a>
    <a class="tab-link" data-content="tab-2">tab2</a>
    <a class="tab-link" data-content="tab-3">tab3</a>
</div>


<div id="tab-1" class="content">1</div>
<div id="tab-2" class="content">2</div>
<div id="tab-3" class="content">3</div>

<强> JQUERY

$('div.tabs a').click(function () {
    if($(this).hasClass('current')){
        $('div.tabs a').removeClass('current');
        $('.content').removeClass('current');        
    }else{    
        var tabid = $(this).attr('data-content');
        //var tabid = $(this).data('content'); //You can use this line instead of above line as well
        $('div.tabs a').removeClass('current');
        $('.content').removeClass('current');
        $(this).addClass('current');
        $("#" + tabid).addClass('current');
    }    
});

<强> JS FIDDLE EXAMPLE

<强>已更新

对于问题的下一部分，您可能需要执行以下操作：

$('div.tabs a').click(function () {
    if($(this).hasClass('current')){
        if($(this).hasClass('close')){
            $('div.tabs a').removeClass('current');
        }else{
            $('div.tabs a').removeClass('current');
            $('.content').not('.close').removeClass('current');        
        }    
    }else{    
        var tabid = $(this).attr('data-content');
        //var tabid = $(this).data('content');
        $('div.tabs a').removeClass('current');
        $('.content').removeClass('current');
        $(this).addClass('current');
        $("#" + tabid).addClass('current');
    }    
});

<强> UPDATED FIDDLE

带有切换按钮的选项卡式内容和用于禁用切换的类

2 个答案: