Question

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

我希望能够再次单击选项卡以关闭它吗？

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

在您的jquery中添加else，删除active类

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

jsfiddle

Answer 2

你在jsFiddle中缺少jQuery，回答你需要使用toggleClass的问题

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

2 个答案: