Question

我有一个div的类（其中有5个）。在我的CSS中，我将该类设置为display:none;。每个div还有一个唯一的 ID 。我想用JS来使这些div单独出现。

类似的东西：

<style>
.hidden{
     display:none; }
</style>
<script>
function displayDiv1(){
    document.getElementById('div1').style.display = "block"; }
function displayDiv2(){
    document.getElementById('div2').style.display = "block"; }
</script>
<div class="hidden" id="div1">
<p>some stuff here</p>
</div>
<div class="hidden" id="div2">
<p>some more stuff here</p>
</div>

这是一个jfiddle（不工作）http://jsfiddle.net/DAzZT/

是否可以执行此类操作或是否必须使用div而不是display:none;单独声明每个id class？

Answer 1

您只需将功能放在正确的范围内，就像在问题中所做的那样，并使用document.getElementById。将左侧的onLoad选项更改为无包裹（正文）

Answer 2

试试 fiddle

你应该使用文档对象

来调用它

function display1(){
document.getElementById('div1').style.display = "block";
}
function display2(){
 document.getElementById('div2').style.display = "block"; 
}

Answer 3

您可以使用jQuery。就像你说的那样，你在你的CSS中设置display：none，之后使用jQuery你有$（'＃element'）。show（）; - 显示或$（'＃element'）。hide（）隐藏。

Answer 4

问题只有getElementById，您需要编写document.getElementById。并且只做一个功能来完成同样的工作：

function showDiv(id) {
    document.getElementById(id).style.display = "block";
    return false;
}

称之为：

<a href="#" onclick="return showDiv('your_div_id');">Show Div</a>

Answer 5

首先，您的代码中存在一个错误，即document.getElementById而非getElementById。

你的小提琴也犯了一个错误。您选择将代码包装到onLoad函数中。这会导致您的实际JavaScript看起来像这样。

window.addEvent('load', function() {
    function display1(){
        document.getElementById('div1').style.display = "block";
    }
    function display2(){
        document.getElementById('div2').style.display = "block"; 
    }
});

您的函数定义在函数内部，在全局范围内无法访问它们。因此，如果您现在点击其中一个链接，则会生成Uncaught ReferenceError。

要解决此问题，您可以设置为不将代码包装到函数中（在选择框架的左侧第一个下拉列表中选择no wrap (head)或no wrap (body)。

或者更好的尝试是将函数添加到全局window对象，保持onLoad包装并修改代码。

window.display1 = function(){
    document.getElementById('div1').style.display = "block";
}
window.display2 = funnction(){
    document.getElementById('div2').style.display = "block"; 
}

Answer 6

在javascript函数中尝试document.getElementById而不是getElementById

Answer 7

这是一个简单的解决方案：

<script>
    function display(num){
       document.getElementById('div'+num).style.display = "block";
       return false;
    }
</script>
<a href="#" onclick="return display(1);">Open Div 1</a><br />
<a href="#" onclick="return display(2);">Open Div 2</a>

Demonstration（我删除了您的position:absolute以让两个div都可见）

使用JavaScript显示隐藏的div

7 个答案: