javascript - Vanilla Javascript 标签不会在点击时关闭

Question

我尝试编写普通 Javascript 代码来打开和关闭按钮(选项卡)并显示内容。

它们会正确显示内容，但不会在点击后隐藏内容。

我对打开选项卡的代码进行了“逆向工程”，但此代码在单击时隐藏了内容和按钮。

很明显我的代码是错误的，但我觉得我离实现我设定的目标已经很近了。所以我希望编辑现有代码，而不是尝试不做任何彻底的改变。

干杯

    function openTab(click, openTab) {
        var i;
        var content;
        var link;

        content = document.getElementsByClassName("content");
        for (i = 0; i < content.length; i++) {
            content[i].style.display = "none";
        }
        links = document.getElementsByClassName("link");
        for (i = 0; i < links.length; i++) {
            links[i].className = links[i].className.replace("active", "");
        }
        document.getElementById(openTab).style.display = "block";
        for (i = 0; i < links.length; i++) {
          click.currentTarget.className += "active";
        }
        document.getElementById(openTab).style.display = "active";
        click.currentTarget.style.display = "none";
    }

<div class="tabs">
  <button class="link" onclick="openTab(event, 'About')">About</button>
  <button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button>
  <button class="link" onclick="openTab(event, 'Contact')">Contact</button>
</div>

<div id="About" class="content">

</div>

<div id="Hire" class="content">

</div>

<div id="Contact" class="content">

</div>

Answer 1

您发布的代码有一些令人困惑的行为(例如按钮完全消失)。我删除了使按钮消失的行，以及两个似乎在链接的类名方面相互冲突的不同循环。

我将代码编辑为简单的内容，根据单击的按钮显示内容，但我怀疑我误解了某些内容，而您在寻找其他内容。也许您可以澄清缺少的内容？

function openTab(click, openTab) {
        var i;
        var content;
        
        var wasOpen = document.getElementById(openTab).style.display === "block";

        content = document.getElementsByClassName("content");
        for (i = 0; i < content.length; i++) {
            content[i].style.display = "none";
        }
        
        if (wasOpen) return;

        document.getElementById(openTab).style.display = "block";
    }

<div class="tabs">
  <button class="link" onclick="openTab(event, 'About')">About</button>
  <button class="link" onclick="openTab(event, 'Hire')">Why You Should Hire Me</button>
  <button class="link" onclick="openTab(event, 'Contact')">Contact</button>
</div>

<div id="About" class="content" style="display:none">
ABOUT CONTENT
</div>

<div id="Hire" class="content" style="display:none">
HIRE CONTENT
</div>

<div id="Contact" class="content" style="display:none">
CONTACT CONTENT
</div>

解释器:

我对 html 所做的更改是 1- 在每个选项卡中添加一些文本和 2- 将所有选项卡设置为显示:无

在 javascript 中:

单击时，我们有一个“openTab”值，表示其中一个选项卡。线路:

var wasOpen = document.getElementById(openTab).style.display === "block";

设置一个 bool 变量，如果“openTab”的显示属性设置为 block ，则该变量为真。

然后我们将所有选项卡设置为 display:none 并使用以下内容:

content = document.getElementsByClassName("content");
for (i = 0; i < content.length; i++) {
    content[i].style.display = "none";
}

现在，根据选项卡是否已经打开，我们要么已经保留该功能，要么将选项卡设置为“阻止”

if (wasOpen) return;
document.getElementById(openTab).style.display = "block";

太棒了!