Javascript 如何使javascipt选项卡与html/css网站配合使用

我为一个客户工作，遇到了麻烦。他想要一个标签系统，当客户端点击标签时，就会打开内容。很容易做到，我做到了，但我遇到了一个问题。当您尝试单击按钮关闭时，它不会为我关闭，尽管如果单击，它会打开新选项卡

下面是codepen上的代码示例：

这是我的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>

砂岩测试
|
清洁注意事项
|
业务守则

[elementor template id=“432”]
[elementor template id=“434”]
[elementor template id=“436”]

这是我的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";
}

var globalToggle=false；
函数菜单切换（tgl、evt、linkName）{
var状态=tgl；
tgl=！state；
如果（tgl）{
globalToggle=false；
返回openCity（evt，linkName）；
}否则{
globalToggle=true；
return document.getElementById（linkName）.style.display=“无”；
}
}
函数openCity（evt，linkName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

我不完全确定如何解决这个问题。我试图将globalVairable分为3个不同的变量和if语句，但当我点击另一个选项卡时，你必须点击两次。 我真的很感激一些帮助，因为这已经困扰了我好几天了

函数菜单切换（tgl、evt、linkName）{
如果（！evt.target.classList.contains（“活动”））{
返回openCity（evt，linkName）；
}否则{
evt.target.classList.remove（“活动”）
return document.getElementById（linkName）.style.display=“无”；
}
}

---

你把切换逻辑搞混了。我将引用类属性，而不是JS变量。如果你不想使用classList，你必须重写一点，但逻辑保持不变。

你能创建一个please吗？抱歉@ChrisG我忘了添加：当你试图单击按钮关闭时，我无法关闭它。你这是什么意思？我没看到你的密码笔上有关闭按钮。您是否希望能够使用您单击的按钮打开“选项卡”作为切换，以便再次单击它以删除“选项卡”？您是否考虑过添加“主页”选项卡？这样，您只需返回一个空选项卡，而不是关闭一个打开的选项卡（需要检查您的位置，然后在单击当前打开的选项卡时关闭）。“只是一个建议。”亚历山大-道歉。该功能应该是我点击的位置，它显示了一个下拉式内容内的一个标签下面。如果我再次单击“位置”，它将关闭选项卡

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