Javascript 无法使Jquery选项卡按需要工作

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

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

单击选项卡时，它将加载与面板相关的内容，并明显隐藏“开始”面板。如果再次单击同一选项卡，它将隐藏与其相关的选项卡，并再次显示“开始”面板

所以我本质上是在切换开始面板。例如，单击选项卡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的JSFIDLE：

---

有人能告诉我正确的逻辑以获得所需的结果吗？

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

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>

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

JS:

<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>

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

使用此解决方案，您可以按类隐藏/显示或选择打开站点上“定义默认”选项卡上的“活动”（在本例中，按类打开）。

---

祝你好运！：）

听起来你需要跟踪活动面板？是的，我就是这么想的，我的javascript不是很好，我花了很长时间才让它工作我需要有一个默认的开始选项卡，当单击选项卡触发器时，我可以切换它，我会尝试将这个逻辑应用到我需要的东西上，虽然你可以在类打开的情况下定义：）是的，这是我假设的，谢谢你，我很快会有一个游戏，看看我是如何得到的。我仍然无法正确地得到它，基本上我需要一个默认的开始面板，你可以切换。因此，默认情况下不会单击任何选项卡，您会看到开始面板，如果单击选项卡1，面板1将打开，如果再次单击选项卡1，开始面板将打开。这有意义吗？这是添加到小提琴中的HTML，您现在可以检查小提琴，我将编辑代码：）