再次單擊時關閉javascript選項卡

Question

我有帶有標簽的部分，需要再次單擊該標簽時關閉這些標簽。

我認為這需要切換方法，但是我不確定該怎么做。

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

這是制表符功能：

function openSubSvc(evt, subSvcName) {
    var i, tabcontent, tablinks;
    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", "");
    }
    document.getElementById(subSvcName).style.display = "block";
    evt.currentTarget.className += " active";
}

這是CSS：

.tab {
 float: left;
 padding:0!important;
 margin:0!important;
}

.tab button {
 padding: 15px;
 width: 100%;
 text-align: left;
 transition: 0.3s;
}

.tab button:last-child {margin-bottom:0;}
.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}

.tab-content {
 width:70.8%!important;
 margin-left:2%!important;
 margin-bottom:0;
 padding:0!important;
}

因此，如果單擊第一個選項卡並打開內容，那么我需要在再次單擊內容時將其關閉。

Answer 1

您必須在單擊的按鈕上檢查active班級。 我只是用if condition更新您的代碼。 謝謝

 function openSubSvc(evt, subSvcName) { var activeClass = evt.target.classList.contains("active") if(!activeClass){ var i, tabcontent, tablinks; 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", ""); } document.getElementById(subSvcName).style.display = "block"; evt.currentTarget.className += " active"; } else { document.getElementById(subSvcName).style.display = "none"; evt.target.classList.remove("active"); } } 

 <div class="tab w-30 ml-100 mp-100"> <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 1</p> </div> <div id="srv1-sub2" class="tab-content"> <p>Text 2</p> </div> <div id="srv1-sub3" class="tab-content"> <p>Text 3</p> </div> 

Answer 2

您可以檢查單擊的選項卡是否已經可見。 當您這樣做時：

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

首先，詢問它是否已經被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
}

Answer 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";
    }
}