HTML/CSS显示/隐藏多个元素? [英] HTML/CSS show/hide multiple elements?

问题描述

我正在寻找针对此挑战的HTML/CSS解决方案: 我有多个具有相同类或相同ID的元素，并且我想使用按钮或拨动开关同时显示/隐藏它们.因此，我有一个click事件，当我单击代表所有这些元素的类或ID时，它们全部隐藏.当我再次单击时，它们必须再次显示.

I'm looking for an HTML/CSS solution to this challenge: I have multiple elements with the same class or same id, and I want to show/hide them all at the same time, using a button or toggle switch. So I then have a click event, when I click that class or ID representing all those elements, they all hide. When I click again, they must show again.

我会感激的

谢谢

推荐答案

HTML和CSS用于描述内容的静态表示形式-无法使用HTML/CSS动态隐藏/显示内容.您将需要使用Javascript来执行此操作.代码示例(非常简单明了的示例):

HTML and CSS are used to describe a static representation of content - there is no way dynamically hide/show content using HTML/CSS. You would need to use Javascript to do this. Code example (very simplistic and unelegant example):

<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
     function hide(div_id) {
           document.getElementById(div_id).style.display = "none";
     }
</script>

一个更好的解决方案是使用jQuery，但我认为对于您的情况，您应该先学习Javascript和HTML/CSS的基础知识，然后再转向jQuery.

A nicer solution would be to use jQuery but I think for your case you should first learn the basics of Javascript and HTML/CSS before moving onto jQuery.

这篇关于HTML/CSS显示/隐藏多个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！