香草Javascript标签不会在点击时关闭 [英] Vanilla Javascript Tabs Won't Close On Click

问题描述

我试图编写可打开和关闭按钮(选项卡)并显示内容的普通Javascript.

I've attempted to code vanilla Javascript that opens and closes buttons (tabs) and shows content.

它们可以正确显示内容，但是一旦单击就不会隐藏内容.

They show the content correctly, but don't hide the content once clicked.

我已经反向工程"了打开选项卡的代码，但是当单击时，该代码隐藏了内容和按钮.

I've 'reverse engineered' the code that the opens the tab, but this code hides the content and the button when clicked.

很明显，我的代码是错误的，但是我觉得我已经很接近实现我打算实现的目标了.因此，我希望编辑现有代码，而不是尝试不进行大幅度更改.

Clearly my code is wrong, but i feel that i'm so close to achieving what i set out to achieve. So i'm looking to edit the existing code, not try not change anything drastically.

欢呼

    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>

推荐答案

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

The code you posted had some confusing behaviour (such as the buttons disappearing completely). I removed the line that made buttons disappear, as well two different loops that seemed to conflict with each other regarding the class name of the links.

我将代码编辑成简单的内容，可以根据单击的按钮显示内容，但是我怀疑我误解了某些内容，而您在追求其他内容.也许您可以澄清缺少的内容?

I edited the code down to something simple that displays the content according to the button clicked, but I suspect I've misunderstood something and you're after something else. Maybe you can clarify what's missing?

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-将所有标签设置为显示:无

The changes I made to the html was 1- to add some text in each tab and 2- set all tabs to display:none

在javascript中:

Within the javascript:

单击时，我们有一个"openTab"值，代表一个标签.该行:

On click, we have a value for "openTab", representing one of the tabs. The line:

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

设置一个布尔变量，如果将"openTab"的显示属性设置为阻止"，则该变量为true.

Sets a Boolean variable which is true if "openTab"'s display property is set to block.

然后，将所有标签设置为显示:无，并显示以下内容:

Then we set all tabs to display:none with the following:

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

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

And now, depending on whether or not the tab was already open, we either leave the function already, or set the tab to "block"

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

Tadaaaa！

这篇关于香草Javascript标签不会在点击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！