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？

回答

相关问题