Question

我有3个div + 3个隐藏的div。我想点击“service1”并在“toggle1”中编辑“display：block”。

HTML：

<div id="service1" onclick="changeService('toggle1')></div>
<div id="service2"></div>
<div id="service3"></div>
<br><br>
<div id="toggle1"></div>
<div id="toggle2"></div>
<div id="toggle3"></div>

CSS：

#toggle1, #toggle2, #toggle3 {display:none}

Javascript：

function changeService(this) {
    this.style.display = "block";
}

希望我能够很好地解释自己，以便你们能够理解。我做错了什么？

提前致谢：）

Answer 1

您正在将字符串传递给函数，而不是对象。您可以使用document.getElementById方法获取相应的div元素：

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

Answer 2

我认为最好使用CSS类。

所以去：

#toggle1, #toggle2, #toggle3 {display:none}
#toggle1.active, #toggle2.active, #toggle3.active{display: block}

然后：

function changeService(id) {
    document.getElementById(id).setAttribute("class", "active");
}

然后您可以保持视图和逻辑分离，并在必要时轻松添加更多样式。千万不要在Javascript中更改CSS。最好添加这样的类来保持清晰。

https://jsfiddle.net/t74tmu7r/2/

Answer 3

首先将脚本文件放在结束体标记之前，以确保加载所有DOM元素，然后使用以下代码：

function changeService(id){
  var elem = document.getElementById(id);
  elem.style.display = "block";
}

然后在div标签中添加一个类名＆＃39; service1＆＃39;这样做：

<div id="service1" onClick="changeService('toggle1');"></div>

应该做的工作。

Javascript - ＆gt; CSS（显示：无显示：块）

3 个答案: