Question

在我的代码中，我使用onclick函数来显示一个带display：none的元素。如果我设置第二个元素显示：none，我如何编写脚本以显示两个隐藏元素？

以下是我使用的代码：

<a href="#" id="clickme" onclick="showStuff('element1'); return false;"></a>

<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>

<script type="text/javascript">
function showStuff(id) {
    document.getElementById(id).style.display = 'block';
}
</script>

Answer 1

您必须将所有元素放在div容器上，当您将显示设置为none时，所有元素都将消失。

Answer 2

代替ID，使用元素的类，并在点击时显示具有该类名的所有元素（我使用的是jQuery）：

<a href="#" id="click-me">Click Me</a>

<div class="elem" style="display:none;"></div>
<div class="elem" style="display:none;"></div>

<script type="text/javascript">
$('#click-me').click(function() {
    $('.elem').show();
});
</script>

Answer 3

没有jQuery

 <input type="button" value="test element1" onclick="showStuff('element1')">
<input type="button" value="test element2" onclick="showStuff('element2')">

<div id="element1" style="display:none;"></div>
<div id="element2" style="display:none;"></div>

js code：

showStuff = function(id){
    document.getElementById(id).style.display = "block";
}

Demo

如何使用onclick显示多个元素？

3 个答案: