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