logo标签列表

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

javascriptjqueryhtmlcss
8

我在Google上搜索了很多关于隐藏和显示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>

请问有人能帮忙吗？

谢谢

你现在有什么代码？ - Hristo
1
与id相同，class也有一个特定的标识符，即“.”。 - Catfish
您想要所有标签同时切换吗？还是每个标签都有一个通用类别来分组？ - Thomas Cheney
8个回答
15

jQuery是否可行？希望是这样，因为这可以实现你想要的效果：

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

$(".class").toggle();
or
$(".class").show();  $(".class").hide();
4
大部分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/

4

正如其他人多次提到的那样，使用 jQuery 的选择器和 .hide 方法很容易实现。然而，既然您在一般情况下询问并且了解如何不使用框架执行此操作是一个好主意，那么这并不是一个完整的答案。

以下是您的选择：

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

    $(".CLASSNAME").hide()

  2. Vanilla JS: Dynamic CSS. One approach is to dynamically append stylesheets to the document head -- you can Alter CSS class attributes with javascript?

  3. Vanilla JS: Modify CSS directly:

        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";
            }
        }
    }
2
这只是不是
$('.classname').hide();

或者将您想要隐藏的所有元素放在一个容器div中，然后隐藏该div。
2

使用jQuery：

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

其中classname是类的名称。

1
1
你可以简单地使用 $(".className").hide(); $(".something") 与 $("#something") 相同，只是它是用于类而不是 ID。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接