Javascript - > CSS（显示：无显示：块）

I have 3 divs + 3 hidden divs. I want to click on "service1" and edit "display:block" in "toggle1".

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

The 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>

The CSS:

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

The Javascript:

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

Hope I explained myself well enough so you guys can understand. What am I doing wrong?

希望我能够很好地解释自己,以便你们能够理解。我究竟做错了什么?

Thanks in advance :)

提前致谢 :)

3 个解决方案

#1

I think it would be best to use CSS classes.

我认为最好使用CSS类。

So go:

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

And then:

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

Then you can keep view and logic separated and easily add more style if necessary. Try never to change your CSS in Javascript. Better add classes like this to keep things clear.

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

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

#2

You are passing a string into function, not an object. You can use document.getElementById method to get corresponding div element:

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

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

#3

first of all place your script file before the closing body tag to make sure all DOM elements are loaded then use this code:

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

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

then in the div tag with a class name 'service1' do this:

然后在div标签中使用类名'service1'执行此操作:

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

that should do the job.

应该做的工作。

#1