javascript - 单击时显示和隐藏选项卡内容

Question

您好，我目前有以下设置 - https://jsfiddle.net/scwbqffo/单击任一选项卡将显示内容并在选项卡之间切换(不确定为什么它不能在 fiddle 中工作但在我的网站上工作正常)。

如果可能，我希望能够再次单击选项卡将其关闭？

$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});

<ul id="tabs">
    <li>Show tab 1</li>
    <li>Show tab 2</li>

</ul>
<ul id="tab">
    <li>showing tab 1 content</li>
    <li>showing tab 2 content</li>
</ul>

ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #252525;
    border-bottom: solid 2px grey;
    padding: 10px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: grey;
}
ul#tabs li.active {
    background-color: #00aeef;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

Answer 1

在删除 active 类的 jquery 中添加 else

else {
  $(this).removeClass('active');
  $("ul#tab li.active").removeClass("active");
}

jsfiddle