首页 > 代码库 > WEB前端:03_hover切换(显示/隐藏)
WEB前端:03_hover切换(显示/隐藏)
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> |
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。