尝试使用按钮切换类的可见性（使用Javascript），绝对没有任何效果，我缺少了什么？

Question

我想建立一个页面，其中页面上某些元素的可见性通过按钮切换，但是由于某种原因，我的代码只是被忽略了/绝对不执行任何操作。

使用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> 

请参阅Codepen： https ：//codepen.io/escapetomars/pen/vxBLgg

Answer 1

更改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文章 ，以更好地理解该结构。

Answer 2

更改功能为：

    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";
    }

Answer 3

正确的方法是document.getElementsByClassName，顾名思义，它返回一个项目数组。 因此，如果必须对这些元素应用任何内容，则需要遍历该数组，然后对每个元素应用某些内容，或者可以使用数组索引选择特定的元素。

var element = document.getElementsByClassName('class')[0]; // assuming you have at least one matching element.
element.style.display = 'none';

这是更新的代码笔的链接

http://codepen.io/vibhanshu/pen/EWYNMb

Answer 4

getElementById和getElementsByClassName之间有一个非常重要的区别。 id是唯一的，并且id="abc"只有一个元素。 因此， getElementById('abc')获取元素，您可以更改其样式。 一些浏览器如果您重复输入ID，则会获得第一个浏览器。

但是getElementsByClassName是不同的。 可能有多个元素class="abc" 。 因此， getElementsByClassName为您提供了一个集合，并且您不能通过这种方式更改集合的样式。 如另一个答案中所述，您需要从集合中选择一个元素以更改其样式。

document.getElementsByClassName("georgian")[0].style.display = "block";