hover切换(显示/隐藏)
网站常用效果之一,以下为简化版,用于学习javascript基础知识。
效果图:
hover显示/隐藏切换 - 纯JS简化版
<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; 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显示/隐藏切换[版本二]
<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; 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>