使用 JavaScript 显示隐藏的 div答案

【问题标题】：Using JavaScript to display hidden divs使用 JavaScript 显示隐藏的 div
【发布时间】：2012-11-06 07:31:07
【问题描述】：

我有一个 class 的 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/

是否可以做这样的事情，还是我必须使用id 而不是class 单独声明每个div display:none;？

【问题讨论】：

标签： javascript css class html

【解决方案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>

【讨论】：

好点，这将为我节省一些时间/空间。我只是想确保这适用于所有浏览器，这是典型行为，还是某些浏览器会对 display 的声明方式挑剔？
据我所知，所有 borwser 都支持 display 风格（不包括 lynx）。
实际上问题在于他将函数包装到另一个函数中，使得他的displayX 函数无法从全局范围内访问。您可以在我的回答中找到有关该问题的更多详细信息。 stackoverflow.com/a/13246583/1375293
@clentfort 我的括号在行尾，我没有将函数包装在另一个函数中，还是我没有看到？
jsfiddle 自动包装

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这个fiddle

你应该使用文档对象来调用它

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

【讨论】：

啊哈！我就这么仓促。感谢您指出这一点。

【解决方案4】：

您只需将您的函数放在正确的范围内，就像您在问题中所做的那样，并使用document.getElementById。把左边的onLoad选项改成no wrap(body)

【讨论】：

【解决方案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"; 
    }
});

你的函数定义是inside一个函数，它们在全局范围内是不可访问的。因此，如果您现在单击其中一个链接，则会生成 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"; 
}

【讨论】：

感谢您的明确解释，我不知道。我是个小菜鸟。

【解决方案6】：

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

【讨论】：

【解决方案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 都可见）

【讨论】：