Question

我试图编写可以打开和关闭按钮（标签）并显示内容的vanilla Javascript。

他们正确显示内容，但一旦点击就不要隐藏内容。

我已经反向设计＆＃39;打开选项卡的代码，但此代码在单击时隐藏内容和按钮。

显然我的代码是错误的，但我觉得我已经非常接近实现我的目标。因此，我希望编辑现有代码，而不是尝试不彻底改变任何内容。

干杯

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

我将代码编辑为简单的内容，根据点击的按钮显示内容，但我怀疑我误解了某些内容并且您已经做了其他事情。也许你可以澄清什么是缺失的？

＆＃13;

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

＆＃13;

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

＆＃13;

解释器：

我对html所做的更改是1-在每个标签中添加一些文字，2-设置所有标签显示：无

在javascript中：

点击后，我们有一个＆＃34; openTab＆＃34;的值，代表其中一个标签。这一行：

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

设置一个布尔变量，如果＆＃34; openTab＆＃34;的显示属性设置为阻止，则该变量为真。

然后我们将所有选项卡设置为display：none，其中包含以下内容：

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

现在，根据标签是否已经打开，我们要么已经离开了该功能，要么将标签设置为＆＃34;阻止＆＃34;

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

Tadaaaa！

Vanilla Javascript选项卡无法单击关闭

1 个答案: