JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果示例
更新時(shí)間：2017年02月28日 10:01:33 作者：小炒花生米
這篇文章主要介紹了JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果,結(jié)合具體實(shí)例形式分析了JS通過鼠標(biāo)事件觸發(fā)自定義函數(shù)控制頁(yè)面元素樣式變換實(shí)現(xiàn)tab切換功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
本文實(shí)例講述了JS實(shí)現(xiàn)的tab切換選項(xiàng)卡效果。分享給大家供大家參考，具體如下：
<script type="text/javascript">
/*
tab切換選項(xiàng)卡js效果 writed by *** 2010.08.13
1.currentid:string 當(dāng)前被激活菜單的id;
2.otherids:Array() 其它未被激活的id;
3.tabclasses:Array() tab被激活時(shí)的樣式類+tab未被激活時(shí)的樣式類,存儲(chǔ)兩個(gè)值即可
*/
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>
應(yīng)用代碼：
<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">這里是維客分享與會(huì)員互動(dòng)區(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>三國(guó)群英傳官方群</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>
效果圖：
更多關(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é)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- Vue.js tab實(shí)現(xiàn)選項(xiàng)卡切換
- 使用vue.js寫一個(gè)tab選項(xiàng)卡效果
- js鼠標(biāo)經(jīng)過tab選項(xiàng)卡時(shí)實(shí)現(xiàn)切換延遲
- 完美實(shí)現(xiàn)js選項(xiàng)卡切換效果(二)
- Vue.js組件tab實(shí)現(xiàn)選項(xiàng)卡切換
- 原生js實(shí)現(xiàn)選項(xiàng)卡功能
- JS使用面向?qū)ο蠹夹g(shù)實(shí)現(xiàn)的tab選項(xiàng)卡效果示例
- js實(shí)現(xiàn)簡(jiǎn)單的選項(xiàng)卡效果
- js-tab選項(xiàng)卡
- js編寫選項(xiàng)卡效果
相關(guān)文章
一個(gè)簡(jiǎn)單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡(jiǎn)潔實(shí)現(xiàn)
經(jīng)常性的會(huì)需要使用表格顯示一些東西，當(dāng)表格比較大的時(shí)候一眼望去腦袋可能會(huì)有些暈，經(jīng)常性的因?yàn)闆]看準(zhǔn)行而出現(xiàn)誤操作，一般解決辦法是交替行變行或者鼠標(biāo)劃過行變色2008-09-09
本文是上一篇文章《用js讀、寫、刪除Cookie代碼分享及詳細(xì)注釋說明》發(fā)現(xiàn)了些問題，進(jìn)行分析解決，推薦給大家2014-12-12
BootStrap fileinput.js文件上傳組件實(shí)例代碼
這篇文章主要介紹了BootStrap fileinput.js文件上傳組件實(shí)例代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)應(yīng)用小結(jié)
這篇文章主要介紹了BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-05-05
JS如何實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼
這篇文章主要介紹了JS如何實(shí)現(xiàn)網(wǎng)站中PC端和手機(jī)端自動(dòng)識(shí)別并跳轉(zhuǎn)對(duì)應(yīng)的代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
JavaScript中使用stopPropagation函數(shù)停止事件傳播例子
這篇文章主要介紹了JavaScript中使用stopPropagation函數(shù)停止事件傳播例子,即阻止事件冒泡的一個(gè)方法,需要的朋友可以參考下2014-08-08
JavaScript隊(duì)列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析
這篇文章主要介紹了JavaScript隊(duì)列結(jié)構(gòu)Queue實(shí)現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-03-03
JavaScript導(dǎo)出Excel實(shí)例詳解
這篇文章主要介紹了JavaScript導(dǎo)出Excel的方法,以實(shí)例形式詳細(xì)分析了javascript將WEB頁(yè)面導(dǎo)出為EXCEL文檔的方法及相關(guān)的技巧說明,對(duì)于深入了解javascript編程原理有一定的借鑒價(jià)值,需要的朋友可以參考下2014-11-11
本文主要介紹了js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
今天小編就為大家分享一篇LayUI表格批量刪除方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08