CSS / Javascript使用CSS类显示/隐藏DIV？

I've googled around and found many scripts for hiding and showing DIV contents, as a toggle on button click.

我已经google了一下，发现了许多用于隐藏和显示DIV内容的脚本，作为按钮点击时的切换。

But they are work using ID's.

但他们使用ID的工作。

I would like to do the same thing BUT I want to use a class instead of an id so that if I want to have 20 DIV's that toggle ... Hide / Show I don't have to add extra code.

我想做同样的事情，但我想使用一个类而不是id，所以如果我想要20个DIV的切换...隐藏/显示我不必添加额外的代码。

Here is some code:

这是一些代码：

<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>

Can anyone help with this please?

有人可以帮忙吗？

Thanks

谢谢

7 个解决方案

#1

Is jquery an option? Hopefully so, because this does what you want:

jquery是一个选择吗？希望如此，因为这样做你想要的：

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

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

#2

Most of the jQuery answers should be pretty easy, but seeing as your example is in regular JS, here's how to do it in JS.

大多数jQuery的答案都应该很简单，但是看看你的例子是普通的JS，这里是如何用JS做的。

Potential downside: browsers that don't support getElementsByTagName. I tested IE7 and it works, but I'm not sure about lower.

潜在的缺点：不支持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;

Try it out: http://jsfiddle.net/robert/PkHYf/

尝试一下：http：//jsfiddle.net/robert/PkHYf/

#3

As others have said several times, this is easy in jQuery using a jquery selector and the .hide method. However, since you are asking in a general sense and it is a good idea to know how to do it without a framework, that isn't a complete answer.

正如其他人多次说过的那样，使用jquery选择器和.hide方法在jQuery中很容易。但是，既然你在一般意义上提出问题并且知道如何在没有框架的情况下做到这一点是个好主意，那么这不是一个完整的答案。

Here are your options:

以下是您的选择：

JQuery Method. Just use jQuery selectors and the .hide() method.

JQuery方法。只需使用jQuery选择器和.hide（）方法。

$(".CLASSNAME").hide()

$（ “CLASSNAME”）。隐藏（）
Vanilla JS: Dynamic CSS. One approach is to dynamically append stylesheets to the document head -- you can Alter CSS class attributes with javascript?

Vanilla JS：动态CSS。一种方法是动态地将样式表附加到文档头 - 您可以使用javascript更改CSS类属性？

Vanilla JS: Modify CSS directly:

Vanilla 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";
            }
        }
    }

#4

Wouldn't this just be

不会这样吗

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

Or group all the elements you want to hide within a container div, and then hide that div.

或者将要隐藏的所有元素分组到容器div中，然后隐藏该div。

#5

Using jQuery:

使用jQuery：

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

where classname is the name of the class.

其中classname是类的名称。

#6

You could simply use $(".className").hide();

你可以简单地使用$（“。className”）。hide（）;

The $(".somthing") do the same as $("#somthing"), except it's for a class instead of an ID.

$（“。somthing”）与$（“＃somthing”）的作用相同，除了它是一个类而不是一个ID。

#7

Using jQuery Selectors, you can find an ID by:

使用jQuery选择器，您可以通过以下方式找到ID：

$("#id")

Changing that to select classes is trivial:

更改它以选择类是微不足道的：

$(".className")

Without using jQuery its a little more non-trivial, but you can check this SO question for some help:

如果不使用jQuery，它就会变得非常简单，但你可以查看这个SO问题以获得一些帮助：

How to getElementByClass instead of GetElementById with Javascript?

如何使用Javascript getElementByClass而不是GetElementById？

#1