| 本章节通过代码实例介绍一下如何实现点击同一按钮实现一个元素的显示和隐藏效果。 此效果还是比较实用的，比如点击按钮可以实现一个功能模块的显示或者隐藏。 下面就通过代码实例介绍一下如何实现此功能。 代码实例如下:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>点击一个按钮隐藏和显示div</
title
>
<
style
type
=
"text/css"
>
#thediv{
width:200px;
height:50px;
background:#ccc;
}
</
style
>
<
script
type
=
"text/javascript"
>
window.onload=function(){
var obt=document.getElementById("bt");
var odiv=document.getElementById("thediv");
obt.onclick=function(){
if(odiv.style.display=="none"){
odiv.style.display="block";
obt.value="隐藏模块";
}
else{
odiv.style.display="none";
obt.value="显示模块";
}
}
}
</
script
>
<
body
>
<
input
type
=
"button"
id
=
"bt"
value
=
"显示模块"
/>
<
div
id
=
"thediv"
style
=
"display:none"
></
div
>
</
body
>
</
html
>
|
上面的代码实现了我们的要求，点击按钮可以实现切换效果。 |