原生js tab選項卡程式碼例項
分享一段程式碼例項,它使用原生javascript實現了tab選項卡功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0px; padding: 0px; list-style: none; } a, a:hover { text-decoration: none; } .fl { float: left; } #divMainTab { margin: 20px 20px 0px 20px; } .normal { float: left; width: auto; height: 40px; text-align: center; vertical-align: middle; cursor: pointer; } .normal a { width: auto; height: 40px; line-height: 40px; display: block; color: #505050; font-size: 16px; text-align: center; padding: 0px 15px; background: #f8f6f4; border-top: 1px solid #dbd6d0; border-right: 1px solid #dbd6d0; } .selected { float: left; width: auto; text-align: center; cursor: pointer; } .selected a { width: auto; height: 40px; line-height: 40px; display: block; background: #ffffff; border-right: 1px solid #dbd6d0; border-top: 1px solid #dbd6d0; border-bottom: 1px solid #fff; color: #ff6600; font-size: 16px; text-align: center; padding: 0px 15px; } .selected a:hover { text-decoration: none; } #divMainTab { height: 41px; display: block; overflow: hidden; border-bottom: 1px solid #dbd6d0; } #divMainTab ul { width: auto; height: 40px; float: left; border-left: 1px solid #dbd6d0; } .divContent { height: 100%; overflow: hidden; margin: 20px; margin-top: 0px; border: 1px solid #dbd6d0; border-top: 0px; padding: 20px; } </style> <script> function changeTab(index){ for (var i=1;i<=5;i++){ document.getElementById ("li_"+i).className ="normal"; document.getElementById ("li_"+index).className ="selected"; document.getElementById ("div"+i).style.display ="none"; } document.getElementById ("div"+index).style.display ="block"; } </script> </head> <body> <div id="divMainTab"> <ul class="fl"> <li id="li_1" class="selected" onmouseover="changeTab('1')"><a href="#">螞蟻部落一</a> </li> <li id="li_2" class="normal" onmouseover="changeTab('2')"><a href="#">螞蟻部落二</a> </li> <li id="li_3" class="normal" onmouseover="changeTab('3')"><a href="#">螞蟻部落三</a> </li> <li id="li_4" class="normal" onmouseover="changeTab('4')"><a href="#">螞蟻部落四</a> </li> <li id="li_5" class="normal" onmouseover="changeTab('5')"><a href="#">螞蟻部落五</a> </li> </ul> </div> <div id="div1" style="display:block" class="divContent">div教程</div> <div id="div2" style="display:none" class="divContent">css教程</div> <div id="div3" style="display :none" class="divContent">ajax教程</div> <div id="div4" style="display :none" class="divContent">jquery教程</div> <div id="div5" style="display :none" class="divContent">json教程</div> </body> </html>
相關文章
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- tab選項卡切換例項程式碼
- jQuery實現的tab選項卡程式碼例項jQuery
- 純css實現的tab選項卡程式碼例項CSS
- css3實現tab選項卡程式碼例項CSSS3
- js選項卡簡單程式碼例項JS
- 原生JS 編寫移動端 tab選項卡JS
- 物件導向實現的tab選項卡效果程式碼例項物件
- jQuery選項卡例項程式碼jQuery
- 使用原生js實現選項卡功能例項教程JS
- js左右滑動選項卡效果程式碼例項JS
- jQuery tab選項卡程式碼詳解jQuery
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- js實現的垂直選項卡效果程式碼例項JS
- javascript tab選項卡JavaScript
- js如何禁用tab鍵例項程式碼JS
- js實現的可以通用的選項卡程式碼例項JS
- JavaScript tab選項卡效果JavaScript
- JavaScript tab選項卡功能JavaScript
- JavaScript多級選項卡效果程式碼例項JavaScript
- bootstrap原始碼分析之tab(選項卡)boot原始碼
- 原生js使用物件導向的方法開發選項卡例項教程JS物件
- js內容左右滑動切換的選項卡程式碼例項JS
- jquery實現的選項卡效果例項程式碼jQuery
- layui豎版tab選項卡UI
- jquery tab選項卡詳解jQuery
- jQuery選項卡切換圖片效果程式碼例項jQuery
- JavaScript禁用tab鍵程式碼例項JavaScript
- 基於swiper的Tab選項卡
- 利用jQuery實現Tab選項卡jQuery
- javascript tab選項卡效果詳解JavaScript
- 微信小程式的tab選項卡的實現微信小程式
- 原生js刪除節點程式碼例項JS
- jquery.idTabs實現的選項卡程式碼例項jQuery
- jQuery實現的選項卡的巢狀程式碼例項jQuery巢狀
- 滑鼠虛滑過選項卡切換效果程式碼例項
- js隨機生成信用卡卡號程式碼例項JS隨機