WEB前端：03_hover切换(显示/隐藏)
时间：2014-05-02 16:43:31
收藏：0
阅读：432
hover切换(显示/隐藏)
网站常用效果之一，以下为简化版，用于学习javascript基础知识。
效果图：
hover显示/隐藏切换 - 纯JS简化版
|
1
2
3
4
5
6
7
8
9
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
35
36
37
38
39 |
<html><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"><title>hover显示/隐藏切换 - 纯JS简化版</title><style type="text/css">*{margin: 0; padding: 0;}#hoverbox {margin:10px; width: 500px;}#hovertit {background: #666; padding: 10px;color: #fff;}#hoverdiv { display: none; border: 1px solid #666; padding: 10px;}</style><script type="text/javascript">window.onload = function() { var
hovertit = document.getElementById(‘hovertit‘); var
hoverdiv = document.getElementById(‘hoverdiv‘); hovertit.onclick = function() { //hoverdiv.style.display = hoverdiv.style.display == ‘block‘ ? ‘none‘ : ‘block‘; if(hoverdiv.style.display == ‘block‘) { hoverdiv.style.display = ‘none‘; } else
{ hoverdiv.style.display = ‘block‘; } }}</script></head><body><div class="hoverbox"> <div id="hovertit">小标题一</div> <div id="hoverdiv">小标题内容一</div></div></body></html> |
hover显示/隐藏切换[版本二]
|
1
2
3
4
5
6
7
8
9
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58 |
<html><head><meta http-equiv="Content-Type"
content="text/html; charset=utf-8"><title>hover显示/隐藏切换 - 纯JS简化版</title><style type="text/css">*{margin: 0; padding: 0;}.hoverbox {margin:10px; width: 500px;}.hovertit {background:
#666; padding: 10px;color: #fff;}.hoverdiv { display: none; border: 1px solid
#666; padding: 10px;}</style><script type="text/javascript">window.onload = function() { function
getClass(elem, elements) { var
tags = elem.getElementsByTagName(‘*‘); var
arr = []; for(var
i=0; i<tags.length; i++) { if(tags[i].className == elements) { arr.push(tags[i]); } } return
arr; } var
hoverbox = getClass(document, ‘hoverbox‘); for(var
b=0; b<hoverbox.length; b++) { getClass(hoverbox[b], ‘hovertit‘)[0].index = b; getClass(hoverbox[b], ‘hovertit‘)[0].onclick = function() { if(getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘) { getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘none‘; } else
{ getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = ‘block‘ } //getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display = getClass(hoverbox[this.index], ‘hoverdiv‘)[0].style.display == ‘block‘ ? ‘none‘ : ‘block‘; } }}</script></head><body><div class="hoverbox"> <div class="hovertit">小标题一</div> <div class="hoverdiv">小标题内容一</div></div><div class="hoverbox"> <div class="hovertit">小标题二</div> <div class="hoverdiv">小标题内容二</div></div></body></html> |
评论（0）