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

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