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

使用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.getElementsByClassNameMDN article,以更好地理解结构。

关于javascript - 尝试使用按钮切换类的可见性(使用Javascript),绝对没有任何效果,我缺少了什么?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42389937/

10-12 07:31
查看更多