Question

我有一个带有标签布局的页面，我希望它的工作方式是：

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

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

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

我已经使用Jquery编写了一些javascript，它会单独切换选项卡，但是如果我打开Tab 1的面板，然后单击Tab 2，它当然会加载开始面板而不是所需的Tab 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');
        }
    });
});

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

无法让Jquery Tabs按需工作

1 个答案: