JavaScript实现的简单Tab点击切换功能示例
网络 2018-08-27 1439
本文实例讲述了JavaScript实现的简单Tab点击切换功能。分享给大家供大家参考，具体如下：
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 69 70 71 72 73 74 75 76 77 78 | <!DOCTYPE html> <html> <head> <title>www.jb51.net tab点击切换</title> <style type="text/css"> *{ padding: 0; margin: 0; } #example{ width: 500px; height: 400px; margin: 0 auto; } #example .hd ul li{ display: inline-block; width: 32%; height: 36px; line-height: 36px; border-radius: 5px; background-color: #333; text-align: center; color: #fff; } #example .hd ul li.current{ background-color: green; } #example .bd{ border: 1px solid #ccc; border-radius: 5px; } #example .bd ul li{ display: none; } #example .bd ul li.current{ display: block; } </style> </head> <body> <div id="example"> <div class="hd"> <ul> <li class="current">Beijing</li> <li>Shanghai</li> <li>Guangzhou</li> </ul> </div> <div class="bd"> <ul> <li class="current">This is Beijing!</li> <li>This is Shanghai</li> <li>This is Guangzhou</li> </ul> </div> </div> <script type="text/javascript"> var hd = document.getElementsByClassName("hd")[0].getElementsByTagName("li"); var bd = document.getElementsByClassName("bd")[0].getElementsByTagName("li"); for (var i = 0; i < hd.length; i++) { hd[i].onclick = function(){ doTabs(this); } } function doTabs(obj){ for (var i = 0; i < hd.length; i++) { if(hd[i]==obj){ hd[i].className = "current"; bd[i].className = "current"; }else{ hd[i].className = ""; bd[i].className = ""; } } } </script> </body> </html> |
