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

Tabbed content with toggle buttons and class to disable toggle

本文关键字：选项 按钮      更新时间：2023-09-26

我正在尝试让这个脚本具有可切换的选项卡。从现在的仪式开始，所有内容都是隐藏的，然后当我点击选项卡按钮时，该选项卡内容就会出现。

我希望如果我再次单击同一选项卡，它会隐藏内容。

这是我到目前为止所拥有的：

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

你也可以这样尝试。如前所述，您必须检查类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>

简讯

$('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小提琴示例

更新

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

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

更新的小提琴

您需要

检查与单击的链接相关的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');
})

更新的小提琴

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

相关文章：