javascript - 无法让 Jquery Tabs 按需要工作

Question

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

当页面加载时，有一个默认的启动面板。

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

所以我实质上是在切换开始面板。例如，单击 Tab 1，显示 Panel 1，再次单击 Tab 1，显示 Start Panel。点击Tab 2，Tab 2显示，点击Tab 3显示，但再次点击tab 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/

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

Answer 1

如果我理解你的话，你只需要像我这样的标签导航。

JSFiddle: here .

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

使用此解决方案，您可以按类(在本例中为类打开)在打开站点的定义默认选项卡上隐藏/显示或选择事件。祝你好运! :)