按类名而不是 ById 显示/隐藏可见性

show/hide visibility by classname not ById

本文关键字：显示 隐藏 可见性 ById      更新时间：2023-09-26

我正在使用这个javascript和代码来隐藏/显示某些div，但是每次单击时，页面上有多个div我想隐藏/显示，所以我宁愿按类名来做。我真的不懂javascript，所以越简单越好。

这是javascript：

<script type="text/javascript"><!--
function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";
}
}
function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";
}
}
//--></script>

这是 html：

<ul id="menubar_index" style="display:block;" class="index">
    <li><a href="#" id="active">Home</a></li>
    <li><a href="#" onclick="show_visibility('menubar_how');hide_visibility('menubar_index') ">How It Works</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">FAQ</a></li>
</ul>
<ul id="menubar_how" style="display:none;" class="howitworks">
    <li><a href="#" onclick="show_visibility('menubar_index');hide_visibility('menubar_how') ">Home</a></li>
    <li><a href="#" id="active">How It Works</a></li>
    <li><a href="#">Testimonials</a></li>
    <li><a href="#">FAQ</a></li>
</ul>

您可能希望：

  • document.querySelector/document.querySelectorAll - 它们将允许您使用类似CSS的规则选择元素;
  • document.getElementsByClassName - 这个将简单地按类名搜索。
相关文章：