无法使Jquery选项卡按需工作

Unable to get Jquery Tabs to work as wanted

本文关键字：工作 选项 Jquery      更新时间：2023-09-26

我有一个选项卡式布局的页面，我希望它的工作方式是：

加载页面时，会有一个默认的开始面板。

当您单击某个选项卡时，它会加载与面板相关的内容，并明显隐藏起始面板。如果再次单击同一选项卡，它将隐藏与之相关的选项卡，并再次显示开始面板。

所以我本质上是在切换启动面板。例如，单击选项卡1，显示"面板1"，再次单击"选项卡1"，显示"开始面板"。单击选项卡2，选项卡2显示，单击选项卡3显示，但再次单击选项卡3，开始显示。。

我已经使用Jquery编写了一些javascript，它会单独切换选项卡，但如果例如我打开选项卡1的面板，然后单击选项卡2，它当然会加载开始面板，而不是所需的选项卡2面板。

这是我的代码，但我就是无法正确理解逻辑。

// when start tab is toggled visible hide all step panels
function showStartPageOnly() {
    if ( $('#start').is(':visible') ) {
        $('.table').addClass('hidden');
    }
    else {
        $('.table').removeClass('hidden');
    }
}
$(document).ready(function () {
    // Stepped Panels
    // Toggle start page when tab clicked
    $( ".tab" ).click(function() {
        $( "#start" ).toggle();
        showStartPageOnly();
    });
});

我在这里创建了一个包含完整HTML和JS的JSFiddle：https://jsfiddle.net/rzuq5qbh/3/

请有人就获得所需结果的正确逻辑提出建议好吗？

如果我理解你的意思，你只需要像我这样的选项卡导航。

JSFiddle:此处。

HTML:

<div class="tabs-triggers">
    <div class="tab-trigger open" rel="tab1">Tab Title 1</div>
    <div class="tab-trigger" rel="tab2">Tab Title 2</div>
    <div class="tab-trigger" rel="tab3">Tab Title 3</div>
    <div class="tab-trigger" rel="tab4">Tab Title 4</div>
</div>
<div class="tab-contents">
    <div id="tab1" class="tab-content open">Lorem 1</div>
    <div id="tab2" class="tab-content">Lorem 2</div>
    <div id="tab3" class="tab-content">Lorem 3</div>
    <div id="tab4" class="tab-content">Lorem 4</div>
</div>

CSS:

.tabs-triggers {
    display: block;
}
.tabs-triggers::after {
    content:"";
    display: block;
    clear: both;
}
.tab-trigger {
    float: left;
    padding: 10px;
}
.tab-trigger.open {
    background: #ddd;
}
.tabs-contents {
    width: 100%;
    clear: both;
}
.tabs-contents::after {
    content:"";
    display: block;
    clear: both;
}
.tab-content {
    width: 100%;
    clear: both;
    display: none;
    padding: 10px;
    background: #ddd;
}
.tab-content.open {
    display: block;
}

JS:

jQuery(document).ready(function(){
    jQuery('.tab-trigger').on('click', function(){
        var thisRel = jQuery(this).attr('rel');
        if(jQuery(this).hasClass('open')){
            jQuery('.tab-trigger').removeClass('open');
            jQuery('.tab-content').removeClass('open');
            jQuery('#start').addClass('open');
        }else{
            jQuery('.tab-trigger').removeClass('open');
            jQuery(this).addClass('open');
            jQuery('.tab-content').removeClass('open');
            jQuery('#'+thisRel).addClass('open');
        }
    });
});

使用此解决方案，您可以按类在打开网站的定义默认选项卡上隐藏/显示或选择活动（在本例中为类打开）。祝你好运！：）

相关文章：