如何使 javascipt 選項卡與 html/css 網站一起使用

Question

我正在為一個客戶工作，我遇到了一個泡菜。 他想要一個標簽系統，當客戶點擊標簽時，它會打開內容。 很容易做到，我做到了，但是我遇到了一個問題。 當您嘗試單擊按鈕關閉時，它不會對我關閉，盡管如果單擊它會打開新選項卡。

這里是codepen上的代碼示例： https://codepen.io/ghostcrawl3r/pen/vYybmJL

這是我的 html 代碼：

<div className="tab">
    <ul style="
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        display: flex;
        justify-content: center;
        ">
        <li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'sandTesting')">THE SANDSTONE TESTING</a></li>
        <li><h4>|</h4></li>
        <li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'cleaningCons')">THE CLEANING CONSIDERATIONS</a></li>
        <li><h4>|</h4></li>
        <li><a class="tablinks" onclick="menuToggle(globalToggle, event, 'codePrac')">THE CODE OF PRACTICE</a></li>
    </ul>

<div id="sandTesting" class="tabcontent">
    [elementor-template id="432"]
</div>

<div id="cleaningCons" class="tabcontent">
    [elementor-template id="434"]
</div>

<div id="codePrac" class="tabcontent">
   [elementor-template id="436"]
</div>

這是我的 Javascript：

   var globalToggle = false;

function menuToggle(tgl, evt, linkName){
    var state = tgl;
    tgl = !state;
    
    if(tgl) {
        globalToggle = false;
        return openCity(evt, linkName);
    } else {
        globalToggle = true;
        return document.getElementById(linkName).style.display = "none";
    }
}

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

我不完全確定如何解決這個問題。 我試圖將 globalVairable 分成 3 個不同的變量，並使用 if 語句但是當我這樣做以單擊另一個選項卡時，您必須單擊兩次。 我真的很感激一些幫助，因為這已經困擾了我好幾天了！

Answer 1

    function menuToggle(tgl, evt, linkName) {
      if (!evt.target.classList.contains("active")) {
        return openCity(evt, linkName);
      } else {
        evt.target.classList.remove("active")
        return document.getElementById(linkName).style.display = "none";
      }
    }

您已經糾結於切換邏輯。 我會參考 class 屬性而不是 JS 變量。 如果你不想使用 classList 你必須重寫一點，但邏輯保持不變。