js實現(xiàn)簡潔的TAB滑動門效果代碼
本文實例講述了js實現(xiàn)簡潔的TAB滑動門效果代碼。分享給大家供大家參考。具體如下:
這是一款滑動門代碼,簡潔TAB,簡單的鼠標(biāo)導(dǎo)航效果,大家或許經(jīng)常見到的效果啦,鼠標(biāo)放在主菜單上,下邊框架內(nèi)的內(nèi)容會跟著變換,鼠標(biāo)不需要點擊,只需要滑上去就可切換內(nèi)容,像一扇門,所以有時候別人叫“滑動門”菜單。
運行效果如下圖所示:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-tab-simple-cha-style-codes/
具體代碼如下:
<html> <head> <title>簡潔TAB</title> <script type="text/javascript"> function nTabs(thisObj, Num) { if (thisObj.className == "active") return; var tabObj = thisObj.parentNode.id;//賦值指定節(jié)點的父節(jié)點的id名字 var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for (i = 0; i < tabList.length; i++) {//點擊之后,其他tab變成灰色,內(nèi)容隱藏,只有點擊的tab和內(nèi)容有屬性 if (i == Num) { thisObj.className = "active"; document.getElementById(tabObj + "_Content" + i).style.display = "block"; } else { tabList[i].className = "normal"; document.getElementById(tabObj + "_Content" + i).style.display = "none"; } } } </script> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; font-size: 14px; } .nTab { width: 500px; height:200px; margin: 20px auto; border: 1px solid #333; overflow: hidden; } .none { display: none; } .nTab .TabTitle li { float: left; cursor: pointer; height: 35px; line-height: 35px; font-weight: bold; text-align: center; width: 124px; } .nTab .TabTitle li a { text-decoration: none; } .nTab .TabTitle .active { background-color:blue; color: #336699; } .nTab .TabTitle .normal { color: #F1AC1C; } .nTab .TabContent { clear: both; overflow: hidden; background: #fff; padding: 5px; display: block; height:100px; } </style> </head> <body> <div class="nTab"> <div class="TabTitle"> <ul id="myTab"> <li class="active" onmouseover="nTabs(this,0);">ASP</li> <li class="normal" onmouseover="nTabs(this,1);">PHP2</li> <li class="normal" onmouseover="nTabs(this,2);">PHP3</li> <li class="normal" onmouseover="nTabs(this,3);">PHP4</li> </ul> </div> <div class="TabContent" > <div id="myTab_Content0"> 第一塊內(nèi)容</div> <div id="myTab_Content1" class="none"> 第二塊內(nèi)容</div> <div id="myTab_Content2" class="none"> 第三塊內(nèi)容</div> <div id="myTab_Content3" class="none"> 第四塊內(nèi)容</div> </div> </div> </body> </html>
希望本文所述對大家的JavaScript程序設(shè)計有所幫助。
- 淺談JavaScript 代碼簡潔之道
- 淺談時鐘的生成(js手寫簡潔代碼)
- JS實現(xiàn)超簡潔網(wǎng)頁title標(biāo)題跑動閃爍提示效果代碼
- js+css實現(xiàn)超簡潔的二級下拉菜單效果代碼
- js實現(xiàn)浮動在網(wǎng)頁右側(cè)的簡潔QQ在線客服代碼
- angular.js和vue.js中實現(xiàn)函數(shù)去抖示例(debounce)
- javascript函數(shù)的節(jié)流[throttle]與防抖[debounce]
- JavaScript中定時控制Throttle、Debounce和Immediate詳解
- JavaScript性能優(yōu)化之函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)
- javascript中的throttle和debounce淺析
- Javascript Throttle & Debounce應(yīng)用介紹
- javascript防抖函數(shù)debounce詳解
相關(guān)文章
javascript解析json格式的數(shù)據(jù)方法詳解
這篇文章主要介紹了javascript解析json格式的數(shù)據(jù)方法詳解,文章通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JavaScript箭頭函數(shù)_動力節(jié)點Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript箭頭函數(shù)的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript中英文字符長度統(tǒng)計方法示例【按照中文占2個字符】
這篇文章主要介紹了JavaScript中英文字符長度統(tǒng)計方法,涉及javascript針對中英文字符的匹配與運算相關(guān)操作技巧,需要的朋友可以參考下2017-01-01如何手動實現(xiàn)一個 JavaScript 模塊執(zhí)行器
這篇文章主要介紹了如何手動實現(xiàn)一個 JavaScript 模塊執(zhí)行器,幫助大家更好的理解和使用JavaScript,感興趣的朋友可以了解下2020-10-10JavaScript兩種axios取消請求方式小結(jié)
本文主要介紹了JavaScript兩種axios取消請求方式小結(jié),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03JavaScript控制語句及搭建前端服務(wù)器的過程詳解
這篇文章主要介紹了JavaScript控制語句及搭建前端服務(wù)器,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-04-04