CSS/JavaScript使用CSS類顯示/隱藏DIV？

我已經搜索並發現了許多隱藏和顯示DIV內容的腳本，作爲點擊按鈕上的切換。CSS/JavaScript使用CSS類顯示/隱藏DIV？

但他們是使用ID的工作。

我想做同樣的事情，但我想用一個類而不是一個ID，以便如果我想有20個DIV的切換...隱藏/顯示我不必添加額外的代碼。

下面是一些代碼：

<script language="javascript"> 
function toggle() { 
    var ele = document.getElementById("toggleText"); 
    var text = document.getElementById("displayText"); 
    if(ele.style.display == "block") { 
      ele.style.display = "none"; 
     text.innerHTML = "show"; 
    } 
    else { 
     ele.style.display = "block"; 
     text.innerHTML = "hide"; 
    } 
} 
</script> 

<a id="displayText" href="javascript:toggle();">show</a> <== click Here 
<div id="toggleText" style="display: none"><h1>peek-a-boo</h1></div>

任何人都可以在這方面幫助嗎？

感謝

來源

2011-04-29 Satch3000

你有什麼代碼，使遠嗎？ – Hristo 2011-04-29 19:52:16

它與id相同，只是id由「＃」指定，而類由「。」指定。 – Catfish 2011-04-29 19:53:37

你想要所有標籤同時切換嗎？或者每個單獨的一個泛型類將它們分組？ – 2013-12-08 16:56:10

是jquery的一個選項嗎？我希望如此，因爲這樣做你想要什麼：

http://api.jquery.com/toggle/

$(".class").toggle(); 
or 
$(".class").show(); $(".class").hide();

來源

2011-04-29 19:53:49 dpb

這是不是僅僅是

$('.classname').hide();

或組所有你想要的容器專區內隱藏，然後隱藏的div元素。

來源

2011-04-29 19:52:55 slandau

使用jQuery：

$(".classname").hide();

其中classname是類的名稱。

來源

2011-04-29 19:53:41 Matthias

使用jQuery選擇器，你可以找到一個ID：

$("#id")

改變這種選擇類很簡單：

$(".className")

沒有使用jQuery它有點不平凡，但你可以檢查th一些幫助的SO問題：

How to getElementByClass instead of GetElementById with Javascript?

來源

2011-04-29 19:54:01

你可以簡單地使用$(".className").hide();

的$(".somthing")一樣做$("#somthing")，除了它的一類，而不是一個ID。

來源

2011-04-29 19:56:11 Mash

大多數jQuery的答案應該很容易，但看到你的例子是在常規的JS中，這裏是如何在JS中做到這一點。

潛在缺點：不支持getElementsByTagName的瀏覽器。我測試了IE7，它工作，但我不確定低。

var divs = document.getElementsByTagName('div'); 

var toggle = function() {  
    for (var i = 0, l = divs.length; i < l; i++) { 
     if (divs[i].getAttribute('class') == 'problem') 
      if (divs[i].style.display == 'none') divs[i].style.display = ''; 
      else divs[i].style.display = 'none'; 
    } 
} 

document.getElementById('Toggle').onclick = toggle;

試試看：http://jsfiddle.net/robert/PkHYf/

來源

2011-04-29 20:02:30 Robert

正如其他人說了好幾次，使用jQuery選擇和.hide方法，這是很容易在jQuery中。但是，由於您一般意義上的要求，知道如何在沒有框架的情況下做到這一點是一個好主意，這並不是一個完整的答案。

這裏是你的選擇：

JQuery的方法。只需使用jQuery選擇器和.hide（）方法即可。

$（「類名。」）隱藏（）
香草JS：動態CSS。一種方法是動態地添加樣式表文件頭 - 你可以Alter CSS class attributes with javascript?

香草JS：直接修改CSS：

var ss = document.styleSheets; 
    for (var i=0; i<ss.length; i++) { 
     var rules = ss[i].cssRules || ss[i].rules; 

     for (var j=0; j<rules.length; j++) { 
      if (rules[j].selectorText === ".classname") { 
       rules[j].style.visibility = "none"; 
      } 
     } 
    }

來源

2011-04-29 20:08:20 slifty

CSS/JavaScript使用CSS類顯示/隱藏DIV？

回答

相關問題