JS實現(xiàn)的tab切換選項卡效果示例
更新時間：2017年02月28日 10:01:33 作者：小炒花生米
這篇文章主要介紹了JS實現(xiàn)的tab切換選項卡效果,結合具體實例形式分析了JS通過鼠標事件觸發(fā)自定義函數(shù)控制頁面元素樣式變換實現(xiàn)tab切換功能的相關實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)的tab切換選項卡效果。分享給大家供大家參考，具體如下：
<script type="text/javascript">
/*
tab切換選項卡js效果 writed by *** 2010.08.13
1.currentid:string 當前被激活菜單的id;
2.otherids:Array() 其它未被激活的id;
3.tabclasses:Array() tab被激活時的樣式類+tab未被激活時的樣式類,存儲兩個值即可
*/
function chaneTab(currentid,otherids,tabclasses){
var tagPrefix="tab";
var conPrefix="con";
//顯示：
document.getElementById(tagPrefix+currentid).className=tabclasses[0];
document.getElementById(conPrefix+currentid).style.display="block";
//隱藏：
for(var i=0;i<otherids.length;i++){
document.getElementById(tagPrefix+otherids[i]).className=tabclasses[1];
document.getElementById(conPrefix+otherids[i]).style.display="none";
}
}
</script>
應用代碼：
<div class="right_centerzbt ml10">
<div class="tou">
<ul class="mt50">
<li onmouseover="chaneTab('001',new Array('002'),new Array('center_bj',''))" id="tab001" class="center_bj"><a>名山明星榜</a></li>
<li onmouseover="chaneTab('002',new Array('001'),new Array('center_bj',''))" id="tab002"><a>熱門群組</a></li>
</ul>
</div>
<div id="con001" style="display: block;" class="right_content1 l bl br bb">
<iframe width="680" height="391" frameborder="0" scrolling="no" style="margin-left: -1px;" border="0" marginheight="0" marginwidth="0" src="shequ/uchome/do.php?ac=ajax&op=getindexspace"></iframe>
</div>
<div id="con002" style="display: none;" class="right_content1 l bl br bb">
<ol class="mt10 ml10">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142654112531.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>武林英雄官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=23" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5"></li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
<ol class="mt10 ">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142678521940.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戲貼圖</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=14" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5">這里是維客分享與會員互動區(qū)。您的...</li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
<ol class="mt10 ml10">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265524528.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>三國群英傳官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=20" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5"></li>
<li class="ml5">主題：<span>1</span>，貼數(shù)：<span>1</span></li>
</ol>
<ol class="mt10 ">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142657314254.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>飄渺仙劍客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=18" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5"></li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
<ol class="mt10 ml10">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142658426959.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>武林英雄客服群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=17" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5"></li>
<li class="ml5">主題：<span>1</span>，貼數(shù)：<span>1</span></li>
</ol>
<ol class="mt10 ">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/12814265147740.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>飄渺仙劍官方群</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=25" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5"></li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
<ol class="mt10 ml10">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142679512873.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戲交友</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=13" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5">記錄管理人員的意見或建議。</li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
<ol class="mt10 ">
<li class="quanzi_pic ml10"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img onerror="this.onerror=null;this.src='';" src="http://192.168.0.113/shequ/uchome/upload/2010-08/128142677312935.jpg"></a></li>
<li class="ml5"><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><b>游戲交易</b></a>(今日：<span><a target="_blank" href="shequ/uchome/space.php?do=mtag&tagid=15" rel="external nofollow" rel="external nofollow" rel="external nofollow" >0</a></span>)</li>
<li class="ml5">生活中的小竅門，都拿出來和大家分...</li>
<li class="ml5">主題：<span>0</span>，貼數(shù)：<span>0</span></li>
</ol>
</div>
</div>
效果圖：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
一個簡單但常用的javascript表格樣式_鼠標劃過行變色 簡潔實現(xiàn)
經(jīng)常性的會需要使用表格顯示一些東西，當表格比較大的時候一眼望去腦袋可能會有些暈，經(jīng)常性的因為沒看準行而出現(xiàn)誤操作，一般解決辦法是交替行變行或者鼠標劃過行變色2008-09-09
本文是上一篇文章《用js讀、寫、刪除Cookie代碼分享及詳細注釋說明》發(fā)現(xiàn)了些問題，進行分析解決，推薦給大家2014-12-12
BootStrap fileinput.js文件上傳組件實例代碼
這篇文章主要介紹了BootStrap fileinput.js文件上傳組件實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
BootStrap中的table實現(xiàn)數(shù)據(jù)填充與分頁應用小結
這篇文章主要介紹了BootStrap中的table實現(xiàn)數(shù)據(jù)填充與分頁功能的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-05-05
JS如何實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼
這篇文章主要介紹了JS如何實現(xiàn)網(wǎng)站中PC端和手機端自動識別并跳轉對應的代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
JavaScript中使用stopPropagation函數(shù)停止事件傳播例子
這篇文章主要介紹了JavaScript中使用stopPropagation函數(shù)停止事件傳播例子,即阻止事件冒泡的一個方法,需要的朋友可以參考下2014-08-08
JavaScript隊列結構Queue實現(xiàn)過程解析
這篇文章主要介紹了JavaScript隊列結構Queue實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
這篇文章主要介紹了JavaScript導出Excel的方法,以實例形式詳細分析了javascript將WEB頁面導出為EXCEL文檔的方法及相關的技巧說明,對于深入了解javascript編程原理有一定的借鑒價值,需要的朋友可以參考下2014-11-11
本文主要介紹了js實現(xiàn)旋轉木馬效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
今天小編就為大家分享一篇LayUI表格批量刪除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08