CSS / Javascript 使用 CSS 类显示 / 隐藏 DIV？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5836710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS / Javascript Show / Hide DIV using a CSS class?
提问by Satch3000
I've googled around and found many scripts for hiding and showing DIV contents, as a toggle on button click.
我已经搜索并找到了许多用于隐藏和显示 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
谢谢
回答by dpb
Is jquery an option? Hopefully so, because this does what you want:
jquery 是一种选择吗？希望如此，因为这可以满足您的需求：
$(".class").toggle();
or
$(".class").show(); $(".class").hide();
回答by Robert
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/
回答by slifty
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 中使用 jquery 选择器和 .hide 方法很容易。但是，由于您是在一般意义上提出问题，并且在没有框架的情况下知道如何做到这一点是个好主意，因此这不是一个完整的答案。
Here are your options:
以下是您的选择：
JQuery Method. Just use jQuery selectors and the .hide() method.
$(".CLASSNAME").hide()
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: 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"; } } }
JQuery 方法。只需使用 jQuery 选择器和 .hide() 方法。
$(".CLASSNAME").hide()
Vanilla JS：动态 CSS。一种方法是将样式表动态附加到文档头部——您可以使用 javascript 更改 CSS 类属性吗？
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"; } } }
回答by slandau
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。
回答by Matthias
Using jQuery:
使用jQuery：
$(".classname").hide();
where classnameis the name of the class.
classname类的名称在哪里。
回答by Jeff Lambert
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?
回答by Mash
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。
