Javascript -> CSS (display:none to display:block)

Javascript -> CSS (display:none to display:block)

本文关键字：display none block to gt CSS Javascript      更新时间：2023-09-26

我有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";
}

希望我解释得足够好，这样你们就能理解。我做错了什么？

提前感谢：）

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

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

我认为最好使用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/

首先将脚本文件放在关闭的body标记之前，以确保所有DOM元素都已加载，然后使用以下代码：

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

然后在类名为"service1"的div标记中执行以下操作：

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

这应该能胜任工作。

相关文章：