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

我想设置一个页面，页面上某些元素的可见性由按钮切换，但由于某些原因，我的代码被忽略/完全不起作用

我可以在使用ID的时候使用它，但是只有页面上ID的第一个实例被更改，而其余的都被忽略。对于类，什么都不会发生

我肯定我遗漏了一些基本的东西，但我不知道是什么。请检查以下内容：

函数georgianInfo（）{
document.getElementByClassName（“格鲁吉亚”）.style.display=“块”；
document.getElementByClassName（“国际”）.style.display=“无”；
}
函数internationalInfo（）{
document.getElementByClassName（“格鲁吉亚”）.style.display=“无”；
document.getElementByClassName（“国际”）.style.display=“块”；
}

格鲁吉亚语{
显示：无；
}
.国际{
显示：块；
}

招生信息
格鲁吉亚学生入学信息
国际学生招生信息

更改

文档.getElementsByClassName的拼写

另外，

document.getElementsByClassName

返回一个数组/元素列表。所以你必须用正确的索引来引用它

参考代码：

函数georgianInfo（）{
document.getElementsByClassName（“格鲁吉亚”）[0].style.display=“block”；
document.getElementsByClassName（“国际”）[0].style.display=“无”；
}
函数internationalInfo（）{
document.getElementsByClassName（“格鲁吉亚”）[0].style.display=“无”；
document.getElementsByClassName（“国际”）[0].style.display=“block”；
}

格鲁吉亚语{
显示：无；
}
.国际{
显示：块；
}

招生信息
格鲁吉亚学生入学信息
国际学生招生信息

更改

文档.getElementsByClassName的拼写

另外，

document.getElementsByClassName

返回一个数组/元素列表。所以你必须用正确的索引来引用它

参考代码：

函数georgianInfo（）{
document.getElementsByClassName（“格鲁吉亚”）[0].style.display=“block”；
document.getElementsByClassName（“国际”）[0].style.display=“无”；
}
函数internationalInfo（）{
document.getElementsByClassName（“格鲁吉亚”）[0].style.display=“无”；
document.getElementsByClassName（“国际”）[0].style.display=“block”；
}

格鲁吉亚语{
显示：无；
}
.国际{
显示：块；
}

招生信息
格鲁吉亚学生入学信息
国际学生入学信息

将函数更改为：

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

将功能更改为：

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

---

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

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

这里是更新代码笔的链接

---

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

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

这里是更新代码笔的链接

---

在

getElementById

和

getElementsByClassName

之间有一个非常重要的区别。Id是唯一的，并且只有一个元素。因此

getElementById（'abc'）

获取元素，您可以更改其样式。有些浏览器如果你有重复的id，会给你第一个

但是

getElementsByClassName

是不同的。可以有多个元素

class=“abc”

。因此，

getElementsByClassName

为您提供了一个集合，您无法通过更改集合样式的方式进行更改。正如在另一个答案中提到的，您需要从集合中选择一个元素来更改其样式

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

---

getElementById

和

getElementsByClassName

之间有一个非常重要的区别。Id是唯一的，并且只有一个元素。因此

getElementById（'abc'）

获取元素，您可以更改其样式。有些浏览器如果你有重复的id，会给你第一个

但是

getElementsByClassName

是不同的。可以有多个元素

class=“abc”

。因此，

getElementsByClassName

为您提供了一个集合，您无法通过更改集合样式的方式进行更改。正如在另一个答案中提到的，您需要从集合中选择一个元素来更改其样式

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

---

非常感谢！这修复了它，让我更好地理解了它是如何工作的。非常感谢！这修正了它，让我更好地理解了它是如何工作的。