CSS / Javascript使用CSS类显示/隐藏DIV？ [英] CSS / Javascript Show / Hide DIV using a CSS class?

问题描述

我已经搜索过，发现很多脚本用于隐藏和显示DIV内容，作为按钮点击切换。

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

但他们使用的ID的工作。

But they are work using ID's.

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

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.

这里是一些代码：

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

谢谢

推荐答案

是jquery选项吗？但愿如此，因为这个你想要做什么：

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

的http：// API。 jquery.com/toggle/

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

这篇关于CSS / Javascript使用CSS类显示/隐藏DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！