0

我有一类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？

4

7 回答 7

1

您只需将您的函数放在正确的范围内，就像您在问题中所做的那样，然后使用document.getElementById. 将左侧的 onLoad 选项更改为 no wrap(body)

于 2012-11-06T07:32:34.107 回答
1

试试这个小提琴

您应该使用文档对象调用它

function display1(){
document.getElementById('div1').style.display = "block";
}
function display2(){
 document.getElementById('div2').style.display = "block"; 
}
于 2012-11-06T07:34:13.103 回答
1

您可以为此使用 jQuery。就像你说的那样，你在你的css中设置了 display: none ，然后使用 jQuery 你有 $('#element').show(); - 显示或 $('#element').hide() 隐藏。

于 2012-11-06T07:34:03.683 回答
1

问题只是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>
于 2012-11-06T07:37:35.977 回答
1

首先，您的代码中有一个错误，它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"; 
}
于 2012-11-06T07:48:19.383 回答
1

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

于 2012-11-06T07:48:36.027 回答
0

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

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

演示（我删除了你position:absolute让两个 div 都可见）

于 2012-11-06T07:35:31.823 回答