WEB前端：03_hover切换(显示/隐藏)
2020-11-24 07:07
阅读：478
YPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
标签：style blog class code java ext
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
|
>
*{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;}>
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‘;
}
}
} |
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
|
>
*{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;}
>
window.onload = function() {
function
getClass(elem, elements) {
var
tags = elem.getElementsByTagName(‘*‘);
var
arr = [];
for(var
i=0; i
if(tags[i].className == elements) {
arr.push(tags[i]);
}
}
return
arr;
}
var
hoverbox = getClass(document, ‘hoverbox‘);
for(var
b=0; 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‘;
}
}
} |
WEB前端：03_hover切换(显示/隐藏),搜素材,soscw.com
WEB前端：03_hover切换(显示/隐藏)
标签：style blog class code java ext
原文地址：http://www.cnblogs.com/haicheng/p/3703720.html
上一篇：php（第一篇）
评论
亲，登录后才可以留言！