標籤：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 | <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> |
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
