我想建立一个页面,其中页面上某些元素的可见性通过按钮切换,但是由于某些原因,我的代码只是被忽略了/绝对不执行任何操作。
使用ID时,我可以使它正常工作,但是只有页面上ID的第一个实例被更改,其余的都被忽略。对于类,什么也没有发生。
我确定我在这里遗漏了一些基本知识,但我不知道是什么。请检查以下内容:
function georgianInfo() {
document.getElementByClassName("georgian").style.display = "block";
document.getElementByClassName("international").style.display = "none";
}
function internationalInfo() {
document.getElementByClassName("georgian").style.display = "none";
document.getElementByClassName("international").style.display = "block";
}
.georgian {
display: none;
}
.international {
display: block;
}
<form><input type="button" onClick="georgianInfo()" value="georgian students"></form>
<form><input type="button" onClick="internationalInfo()" value="international students"></form>
<h4 class="margin-rmv">Admissions Information</h4>
<h5 class="georgian">Georgian Students Admissions Information</h5>
<h5 class="international">International Students Admissions Information</h5>
请参阅代码笔:https://codepen.io/escapetomars/pen/vxBLgg
最佳答案
更改document.getElementsByClassName
的拼写。
同样,document.getElementsByClassName
返回元素的数组/列表。因此,您必须使用正确的索引来引用它。
参考代码:
function georgianInfo() {
document.getElementsByClassName("georgian")[0].style.display = "block";
document.getElementsByClassName("international")[0].style.display = "none";
}
function internationalInfo() {
document.getElementsByClassName("georgian")[0].style.display = "none";
document.getElementsByClassName("international")[0].style.display = "block";
}
.georgian {
display: none;
}
.international {
display: block;
}
<table class="tab-menu" cellspacing="0" cellpadding="0">
<tr>
<td>
<form><input type="button" onClick="georgianInfo()" value="for georgian students"></form>
</td>
<td>
<form><input type="button" onClick="internationalInfo()" value="for international students"></form>
</td>
</tr>
</table>
<h4 class="margin-rmv">Admissions Information</h4>
<h5 class="georgian">Georgian Students Admissions Information</h5>
<h5 class="international">International Students Admissions Information</h5>
我建议您仔细阅读关于
Document.getElementsByClassName
的MDN article,以更好地理解结构。关于javascript - 尝试使用按钮切换类的可见性(使用Javascript),绝对没有任何效果,我缺少了什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42389937/