小編給大家分享一下JavaScript如何實現的簡單Tab點擊切換功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
專注于為中小企業提供網站制作、網站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業朝陽免費做網站提供優質的服務。我們立足成都,凝聚了一批互聯網行業人才,有力地推動了上1000+企業的穩健成長,幫助中小企業通過網站建設實現規模擴充和轉變。具體如下:
<!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>
使用本站HTML/CSS/JS在線運行測試工具:http://tools.jb51.net/code/HtmlJsRun,可得到如下測試運行效果:
以上是“JavaScript如何實現的簡單Tab點擊切換功能”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創新互聯行業資訊頻道!
網站題目:JavaScript如何實現的簡單Tab點擊切換功能-創新互聯
轉載源于:http://m.newbst.com/article44/dihghe.html
成都網站建設公司_創新互聯,為您提供微信小程序、網站設計公司、定制開發、網站營銷、App開發、網站維護
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯