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

【问题标题】：CSS / Javascript Show / Hide DIV using a CSS class?CSS / Javascript 使用 CSS 类显示 / 隐藏 DIV？
【发布时间】：2011-08-15 18:07:09
【问题描述】：

我四处搜索，发现许多用于隐藏和显示 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>

有人可以帮忙吗？

谢谢

【问题讨论】：

到目前为止你有什么代码？
除了id用“#”指定，class用“.”指定以外，和id一样
您希望所有标签同时切换吗？或者每个单独使用一个通用类将它们分组？

标签： javascript jquery html css

【解决方案1】：

jquery 是一个选项吗？希望如此，因为这可以满足您的要求：

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

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

【讨论】：

【解决方案2】：

大多数 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/

【讨论】：

【解决方案3】：

正如其他人多次说过的，这在 jQuery 中使用 jquery 选择器和 .hide 方法很容易。但是，由于您是在一般意义上提出问题，并且知道如何在没有框架的情况下进行操作是个好主意，因此这不是一个完整的答案。

以下是您的选择：

JQuery 方法。只需使用 jQuery 选择器和 .hide() 方法。

$(".CLASSNAME").hide()
原版 JS：动态 CSS。一种方法是动态地将样式表附加到文档头部——你可以Alter CSS class attributes with javascript?

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

不就是这样吗

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

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

【讨论】：

【解决方案5】：

使用 jQuery：

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

其中classname 是类的名称。

【讨论】：

【解决方案6】：

你可以简单地使用$(".className").hide();

$(".somthing") 的作用与$("#somthing") 相同，只是它用于类而不是 ID。

【讨论】：

【解决方案7】：

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

$("#id")

改变它来选择类是微不足道的：

$(".className")

如果不使用 jQuery，它会更加重要，但您可以查看这个 SO 问题以获得一些帮助：

How to getElementByClass instead of GetElementById with Javascript?

【讨论】：

【解决方案8】：

这对于 Vanilla JS 来说是一个很好的解决方案：

https://attacomsian.com/blog/javascript-hide-show-elements-using-css-class

添加/删除.hidden css 类。

【讨论】：