再次单击时关闭javascript选项卡

我有带选项卡的部分，需要在再次单击选项卡时关闭这些选项卡

我认为这需要一个切换方法，但我不知道如何做到这一点

以下是HTML：

<div class="tab">
 <button class="tablinks" id="tab1" onclick="openSubSvc(event, 'srv1-sub1')" >Sub-Service 1</button>
 <button class="tablinks" id="tab2" onclick="openSubSvc(event, 'srv1-sub2')">Sub-Service 2</button>
 <button class="tablinks" id="tab3" onclick="openSubSvc(event, 'srv1-sub3')">Sub-Service 3</button>
</div>

<div id="srv1-sub1" class="tab-content">
 <p>Text</p>
</div>

<div id="srv1-sub2" class="tab-content">
 <p>Text</p>
</div>

<div id="srv1-sub3" class="tab-content">
 <p>Text</p>
</div>

---

因此，如果单击第一个选项卡并打开内容，我需要在再次单击时关闭内容。

您可以检查单击的选项卡是否已可见。当您这样做时：

document.getElementById(subSvcName).style.display = "block";

首先，询问它是否已经是

块

（未测试，前面的代码未列出）：

---

您必须在单击的按钮上检查

active

class。我只是用

if条件更新你的代码。谢谢


函数openSubSvc（evt，subSvcName）{
var activeClass=evt.target.classList.contains（“活动”）
如果（！activeClass）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“选项卡内容”）；
对于（i=0；i

次级服务1
次级服务2
次级服务3
文本1

文本2

文本3

您可以通过以下方式更新函数：

function openSubSvc(evt, subSvcName) {
    var i, tabcontent, tablinks, me, shoulOpenTab;

    me = document.getElementById(subSvcName);
    // Checks if this tab has class active
    isActive = me.classList.contains("active");

    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // If this tab has active class onClick, you don't need to select again
    if (!isActive) {
        me.style.display = "block";
        evt.currentTarget.className += " active";
    }
}

函数openSubSvc（evt，subSvcName）{ 变量i、tabcontent、tablinks、me、shoulOpenTab； me=document.getElementById（subSvcName）； //检查此选项卡是否有活动的类 isActive=me.classList.contains（“active”）； tabcontent=document.getElementsByClassName（“选项卡内容”）； 对于（i=0；i

document.getElementById(subSvcName).style.display = "block";

var el = document.getElementById(subSvcName);

if (el.style.display !== 'none') {
    el.style.display = 'none'; // hide if already visible
} else {
    el.style.display = 'block' // show otherwise
}

function openSubSvc(evt, subSvcName) {
    var i, tabcontent, tablinks, me, shoulOpenTab;

    me = document.getElementById(subSvcName);
    // Checks if this tab has class active
    isActive = me.classList.contains("active");

    tabcontent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // If this tab has active class onClick, you don't need to select again
    if (!isActive) {
        me.style.display = "block";
        evt.currentTarget.className += " active";
    }
}