js實現(xiàn)tab選項卡函數(shù)代碼

更新時間：2010年04月22日 20:57:47 作者：

js實現(xiàn)tab選項卡函數(shù)代碼，需要的朋友可以參考下，這樣的代碼也是比較常用的，相當原理也比較簡單。

<html> <head> <style type="text/css"> * { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-bottom: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; } .tab UL { zoom: 1; clear: both; } .tab UL:after { display: block; height: 0px; visibility: hidden; clear: both; content: ""; } .tab UL LI { text-align: center; line-height: 26px; width: 60px; display: inline; background: #000; float: left; height: 26px; color: #fff; } .tab UL LI.on { background: #fff; color: #000; } .tabList { border-bottom: #000 1px solid; border-left: #000 1px solid; height: 150px; border-top: #000 1px; border-right: #000 1px solid; } .tabList .one { padding-bottom: 10px; padding-left: 10px; padding-right: 10px; display: none; color: #ff0000; padding-top: 10px; } .tabList .block { display: block; } </style> <script type="text/javascript"> function setTab(name,m,n){ for( var i=1;i<=n;i++){ var menu = document.getElementById(name+i); var showDiv = document.getElementById("cont_"+name+"_"+i); menu.className = i==m ?"on":""; showDiv.style.display = i==m?"block":"none"; } } </script> <meta name="GENERATOR" content="MSHTML 8.00.7600.16535"> </head> <body> <div   id="tn7vjpf"   class="wid240"> <div   id="lzxflzd"   class="tab"> <ul> <li id="one1" class="on" onmouseover='setTab("one",1,4)'>one1 </li> <li id="one2" onmouseover='setTab("one",2,4)'>one2 </li> <li id="one3" onmouseover='setTab("one",3,4)'>one3 </li> <li id="one4" onmouseover='setTab("one",4,4)'>one4 </li> </ul> </div> <div   id="tpnbxvz"   class="tabList"> <div   class="rr39pt5"   id="cont_one_1" class="one block"> cont_one_1</div> <div   class="vvb3fd7"   id="cont_one_2" class="one"> cont_one_2</div> <div   class="z7lzfft"   id="cont_one_3" class="one"> cont_one_3</div> <div   class="zr7t5th"   id="cont_one_4" class="one"> cont_one_4</div> </div> </div> <div   id="5tr7h5d"   class="wid180"> <div   id="frx5tzp"   class="tab"> <ul> <li id="tow1" class="on" onclick='setTab("tow",1,3)'>tow1 </li> <li id="tow2" onclick='setTab("tow",2,3)'>tow2 </li> <li id="tow3" onclick='setTab("tow",3,3)'>tow3 </li> </ul> </div> <div   id="btz5v5z"   class="tabList"> <div   class="pxvd5bx"   id="cont_tow_1" class="one block"> cont_tow_1</div> <div   class="dnvj57l"   id="cont_tow_2" class="one"> cont_tow_2</div> <div   class="xxb5njt"   id="cont_tow_3" class="one"> cont_tow_3</div> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

關于JavaScript的gzip靜態(tài)壓縮方法
關于JavaScript的gzip靜態(tài)壓縮方法...
2007-01-01
Three.js利用性能插件stats實現(xiàn)性能監(jiān)聽的方法
Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創(chuàng)建各種三維場景，而下面這篇文章主要給大家介紹了關于Three.js如何利用性能插件stats實現(xiàn)性能監(jiān)聽的相關資料，需要的朋友可以參考借鑒，下面來一起學習學習吧。
2017-09-09
javascript網(wǎng)頁關鍵字高亮代碼
非常不錯的關鍵字高亮代碼，用js實現(xiàn)，這個方法不錯
2008-07-07
用最少的JS代碼寫出貪吃蛇游戲
本篇文章給大家分享了用嘴簡單的JS代碼來實現(xiàn)經(jīng)典貪吃蛇游戲的全部內(nèi)容，有興趣的朋友參考學習下。
2018-01-01
解決bootstrap導航欄navbar在IE8上存在缺陷的方法
這篇文章主要為大家詳細介紹了解決bootstrap導航欄navbar在IE8上存在缺陷的方法,需要的朋友可以參考下
2016-07-07
javascript設置和獲取cookie的方法實例詳解
這篇文章主要介紹了javascript設置和獲取cookie的方法,結合實例形式較為詳細的分析總結了JavaScript操作cookie簡單實現(xiàn)數(shù)據(jù)存儲與讀取的相關技巧,需要的朋友可以參考下
2016-01-01
js滾動條多種樣式,推薦
[紅色]js滾動條多種樣式,推薦...
2007-02-02
極簡主義法編寫JavaScript類
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡主義法"（minimalist approach）。下面通過本文給大家分享極簡主義法編寫JavaScript類的相關知識，一起看看吧
2017-11-11
js技巧之十幾行的代碼實現(xiàn)vue.watch代碼
相信很多的用vue的人都知道vue雙向綁定的原理建立在，給屬性綁定了getter和setter，在屬性被改變的同時觸發(fā)視圖的再渲染。而本期也是借助這兩個內(nèi)置方法實現(xiàn)vue內(nèi)的watch
2018-06-06
小程序?qū)崿F(xiàn)訂單評價和商家評價
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)訂單評價和商家評價功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04