JS實(shí)現(xiàn)的簡單tab切換功能完整示例
本文實(shí)例講述了JS實(shí)現(xiàn)的簡單tab切換功能。分享給大家供大家參考,具體如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.dbjr.com.cn tab切換</title> <style> * { padding: 0; margin: 0 } body { font-size: 12px } ul, li, ol { list-style: none } a { text-decoration: none } .clearfix { clear: both; overflow: hidden } .tab_title ul li { float: left; padding: 0 10px } </style> </head> <body> <div id="Tab1" class="tab clearfix"> <div class="tab_title clearfix"> <ul> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',1,3)" id="one1">TAB1</a></li> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',2,3)" id="one2">TAB2</a></li> <li><a target="_self" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" onmouseover="setTab('one',3,3)" id="one3">TAB3</a></li> </ul> </div> <div class="tab_details clearfix"> <div id="con_one_1" style="display: block;">con_one_1</div> <div style="display: none;" id="con_one_2">con_one_2</div> <div style="display: none;" id="con_one_3">con_one_3</div> </div> </div> <script type="text/javascript"> //tab切換效果 function setTab(name, cursel, n) { for(var i = 1; i <= n; i++) { var menu = document.getElementById(name + i); var con = document.getElementById("con_" + name + "_" + i); menu.className = i == cursel ? "cur" : ""; con.style.display = i == cursel ? "block" : "none"; } } </script> </body> </html>
運(yùn)行結(jié)果:
感興趣的朋友可以使用本站在線HTML/CSS/JavaScript代碼運(yùn)行工具:http://tools.jb51.net/code/HtmlJsRun,測試上述代碼運(yùn)行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript切換特效與技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
javascript+css 網(wǎng)頁每次加載不同樣式的實(shí)現(xiàn)方法
用戶每次訪問時(shí)隨機(jī)載入樣式,讓微博在視覺上保持新鮮感。雖然思路與實(shí)現(xiàn)都比較簡單,但還是想記錄下來,與大家分享。2009-12-12JavaScript中各種時(shí)間轉(zhuǎn)換問題詳解(YYYY-MM-DD、時(shí)間戳、中國標(biāo)準(zhǔn)時(shí)間)
在某些場景下,需要將時(shí)間轉(zhuǎn)換為字符串進(jìn)行展示或傳遞,下面這篇文章主要給大家介紹了關(guān)于JavaScript中各種時(shí)間轉(zhuǎn)換問題(YYYY-MM-DD、時(shí)間戳、中國標(biāo)準(zhǔn)時(shí)間)的相關(guān)資料,需要的朋友可以參考下2024-02-02基于RequireJS和JQuery的模塊化編程日常問題解析
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程,感興趣的朋友一起學(xué)習(xí)吧2016-04-04setinterval()與clearInterval()JS函數(shù)的調(diào)用方法
這篇文章主要介紹了setinterval()與clearInterval()JS函數(shù)的調(diào)用方法,實(shí)例分析了setinterval()與clearInterval()的語法結(jié)構(gòu)及使用技巧,需要的朋友可以參考下2015-01-01gojs實(shí)現(xiàn)螞蟻線動(dòng)畫效果
這篇文章介紹了gojs實(shí)現(xiàn)螞蟻線動(dòng)畫效果的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-01-01使用javascript獲取flash加載的百分比的實(shí)現(xiàn)代碼
使用javascript獲取flash加載的百分比的實(shí)現(xiàn)代碼,方便flash小游戲判斷頁面,提高用戶體驗(yàn)。2011-05-05