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顯示/隱藏多個元素？

回答

相關問題