Hover Toggle (Show/Hide)
One of the common effects of the site, the following is a simplified version, for learning JavaScript basics.
：
Hover Show/Hide toggle-Pure JS Simplified version
?
| 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 |
<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() { varhovertit = document.getElementById(‘hovertit‘); varhoverdiv = 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><body><div class="hoverbox"> <div id="hovertit">小标题一</div> <div id="hoverdiv">小标题内容一</div></div></body> |
Hover Show/Hide Toggle [version Two]
?
| 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 |
<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() { functiongetClass(elem, elements) { vartags = elem.getElementsByTagName(‘*‘); vararr = []; for(vari=0; i<tags.length; i++) { if(tags[i].className == elements) { arr.push(tags[i]); } } returnarr; } varhoverbox = getClass(document, ‘hoverbox‘); for(varb=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‘; } }}</script><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> |
