WEB前端:06_accordion手风琴效果
accordion手风琴效果
网站常用效果之一,以下为简化版,用于学习javascript基础知识。
效果图:
accordion手风琴效果 - 纯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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68 |
<html> <head> <meta http-equiv= "Content-Type"
content= "text/html; charset=utf-8" > <title>accordion手风琴效果 - 纯js简化版</title> <style type= "text/css" > *{margin: 0; padding: 0;} #acclist {list-style: none; width: 400px; margin: 10px; padding: 0;} #acclist li { background: #ccc; list-style: none; margin: 0 0 1px 0; padding: 0;} #acclist li h3 {font-size: 13px; color: #fff; background: #666; padding: 5px;cursor:pointer;} #acclist li div { display: none; padding: 5px; height: 80px;} </style> <script type= "text/javascript" > window.onload = function () { var
acc = document.getElementById( ‘acclist‘ ); var
accli = acc.getElementsByTagName( ‘li‘ ); for ( var
i=0; i<accli.length; i++) { accli[i].getElementsByTagName( ‘h3‘ )[0].index = i; accli[i].getElementsByTagName( ‘h3‘ )[0].onmouseover = function () { for ( var
a=0; a<accli.length; a++) { accli[a].getElementsByTagName( ‘div‘ )[0].style.display = "none" ; } if (accli[ this .index].getElementsByTagName( ‘div‘ )[0].style.display == "block" ) { accli[ this .index].getElementsByTagName( ‘div‘ )[0].style.display = "none" ; } else
{ accli[ this .index].getElementsByTagName( ‘div‘ )[0].style.display = "block" } } } accli[0].getElementsByTagName( ‘div‘ )[0].style.display = "block" ; } </script> </head> <body> <div> <ul id= "acclist" > <li> <h3>acctit01</h3> <div>accdiv01</div> </li> <li> <h3>acctit02</h3> <div>accdiv02</div> </li> <li> <h3>acctit03</h3> <div>accdiv03</div> </li> <li> <h3>acctit04</h3> <div>accdiv04</div> </li> <li> <h3>acctit05</h3> <div>accdiv05</div> </li> <li> <h3>acctit06</h3> <div>accdiv06</div> </li> </ul> </div> </body> </html> |
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。