HTML/CSS显示/隐藏多个元素？

我正在寻找适用于此挑战的HTML/CSS解决方案：我有多个具有相同类或相同ID的元素，并且我希望使用按钮或切换开关同时显示/隐藏它们。所以我有一个点击事件，当我点击代表所有这些元素的类或ID时，它们都隐藏起来。当我再次点击时，他们必须再次显示。HTML/CSS显示/隐藏多个元素？

我将不胜感激

感谢

来源

2012-03-02 DextrousDave

没有这样的事，作为一个在CSS中点击事件，在HTML中最接近的是锚点。我相信你会需要JavaScript。 – xec 2012-03-02 13:32:32

您可以使用javascript或jquery实现此功能 – 2012-03-02 13:33:10

请不要在具有相同ID的页面上创建多个元素。 – Andrew 2012-03-02 13:50:24

HTML和CSS用于描述内容的静态表示 - 无法使用HTML/CSS动态地隐藏/显示内容。你将需要使用Javascript来做到这一点。代码示例（非常简单和unelegant为例）：

<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，但我认为你的情况下，你首先应该移动到之前的jQuery学习JavaScript和HTML/CSS的基础知识。

来源

2012-03-02 13:37:07 christophmccann

感谢你，这真的看起来像一个可行的解决方案，将尝试。 – DextrousDave 2012-03-02 16:26:45

还有就是你的任务没有CSS的解决方案。寻找JQuery函数.toggle（）。

$('.button').click(function(){ 
    $('.some_class').toggle(); 
});

来源

2012-03-02 13:35:11

在jQuery中，你可以直接电话咨询：

$('.ToggleMe).toggle();

其中.ToggleMe是类的元素。

要通过ID切换：

$("#ToggleMe").toggle();

还可以切换我的名字：

$('div[name=ToggleMe]')

来源

2012-03-02 13:37:54 HeavenCore

我是通用的，你可以传递ID的名称到$构造函数，我已经澄清了我的答案，但以防万一:) – HeavenCore 2012-03-02 13:41:17

感谢您的回答，将尽力 – DextrousDave 2012-03-02 16:21:42

做不使用相同ID的HTML元素！使用元素类属性。 jQuery是很好的事，但矫枉过正这样的事情:)

<div class="hide1">One</div> 
<div class="hide2">Two</div> 

<a href="#" onclick="ToggleVisibility('hide1'); return false;">One</a> 
<a href="#" onclick="ToggleVisibility('hide2'); return false;">Two</a> 
<a href="#" onclick="ToggleVisibility('nosuchclass'); return false;">No hide</a>

而且简单的JS代码：

function ToggleVisibility(divClass) 
{ 
    var els = document.getElementsByClassName(divClass); 
    for(var i = 0; i < els.length; i++) 
    { 
     els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden"; 
    } 
}

据W3Schools的，能见度是所有主流浏览器非标准的东西 http://www.w3schools.com/jsref/prop_style_visibility.asp

来源

2012-03-02 13:58:40

谢谢您的回答。我的大脑会对此咀嚼。赞赏 – DextrousDave 2012-03-02 16:21:19

你可以用CSS来完成。看到这个简单的例子http://jsfiddle.net/rHSmV/（代码粘贴在下面）。

看到这里http://dev.opera.com/articles/view/css3-show-and-hide/

这里http://cssdeck.com/labs/css-only-showhide

进行更深入的示例

<html> 
<head> 
<style type='text/css'> 
/* Use a checkbox to workaround showing and hiding */ 
input[type=checkbox] { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 
label { 
    cursor: pointer; 
} 
/* Shown */ 
div.showhide { 
    display: inline; 
} 
/* Hidden */ 
input[type=checkbox]:checked ~ div.showhide { 
    display: none; 
} 
</style> 
</head> 
<body> 
<label for="showHide">Show/Hide</label> 
<input type="checkbox" id="showHide"> 
<div class="showhide"> 
    <p>Show and hide me without JavaScript!</p> 
</div> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 
<div class="showhide"> 
    <p>Show and hide me too without JavaScript!</p> 
</div> 

</body> 

</html>

来源

2013-08-16 02:55:50 opticyclic

您可以使用jQuery ...

$("id of button").click(function(e) { 
if($("class of elements").css("display") != "none") { 
    $("class of elements").hide(); 
    $("class of elements").css("display","none"); 
} else { 
    $("class of elements").show(); 
    $("class of elements").css("display","block"); 
} 
});

来源

2013-08-16 04:54:27

HTML/CSS显示/隐藏多个元素？

回答

相关问题