如何使 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 你必须重写一点，但逻辑保持不变。