Vanilla Javascript选项卡无法单击关闭

时间:2018-05-20 15:41:47

标签: javascript html css

我试图编写可以打开和关闭按钮(标签)并显示内容的vanilla 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";
    }
&#13;
&#13;
&#13;

&#13;
&#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;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

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

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

&#13;
&#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;
&#13;
&#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!