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程序設計有所幫助。
相關文章
在一些情境下,用戶通過瀏覽器上傳word、excel、pdf等各種類型的文件到系統(tǒng),上傳后可以隨時下載,下面這篇文章主要介紹了前端通過表單將pdf等文件傳入后端的相關資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了js獲取當前時間，一種是獲取昨天、今天、明天的準確時間，一個精確到時分秒,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
最常用的12種設計模式小結，學習js的朋友可以參考下。2011-08-08
JS判斷頁面加載狀態(tài)以及添加遮罩和緩沖動畫的代碼廢話少說，直接貼代碼！有注釋2012-10-10
有時候為了更好的實現(xiàn)代碼分離，不用把時間直接寫到代碼中。通過動態(tài)綁定事件即可。2011-01-01
本文給大家分享一段簡單的js代碼實現(xiàn)用戶登錄記住密碼操作，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-03-03
JavaScript高仿支付寶倒計時頁面及代碼實現(xiàn)
在支付寶上我們經常會見到支付寶倒計時功能，倒計時應用非常廣泛，下文給大家介紹js制作支付寶倒計時功能，但是里面涉及到，倒計時，彈框，以及字體圖的相關知識，感興趣的朋友一起看看吧2016-10-10
在JavaScript中使用嚴格模式(Strict Mode)
這篇文章主要介紹了在JavaScript中使用嚴格模式(Strict Mode),除了正常運行模式，ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了js多功能分頁組件layPage的適用方法，layPage是一款多功能的js分頁組件，即適用于異步分頁，又可用于傳統(tǒng)的整頁刷新跳頁，功能多樣，想要了解的朋友可以參考下文進行學習2016-05-05
這篇文章主要介紹了Bootstrap中的Panel和Table全面解析的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06