我尝试编写普通 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>
最佳答案
您发布的代码有一些令人困惑的行为(例如按钮完全消失)。我删除了使按钮消失的行,以及两个似乎在链接的类名方面相互冲突的不同循环。
我将代码编辑为简单的内容,根据单击的按钮显示内容,但我怀疑我误解了某些内容,而您在寻找其他内容。也许您可以澄清缺少的内容?
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";
太棒了!
关于javascript - Vanilla Javascript 标签不会在点击时关闭,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50436555/