JS实现的标签切换选项卡效果示例

本文实例讲述了射流研究…实现的标签切换选项卡效果。分享给大家供大家参考，具体如下：

脚本类型=' text/JavaScript '/*选项卡切换选项卡射流研究…效果作者* * * 2010 .08 .131 .当前tid :字符串当前被激活菜单的id；2 .其他ids 3360阵列()其它未被激活的id；3 .选项卡类3360数组()选项卡被激活时的样式类标签未被激活时的样式类，存储两个值即可*/function chaneTab(当前tid，otherids，Tab类){ var tag prefix=' tabvar conPrefix=' con//显示：文档。getelementbyid(标记前缀当前tid).类名=tab类[0]；文件。getelementbyid(con前缀当前tid)。风格。display=' block//隐藏：for(var I=0；iotherids . LengTii){ document。getelementbyid(标记前缀其他id[I]).类名=tab类[1]；文件。getelementbyid(con前缀其他id[I])。风格。显示='无'；} }/脚本应用代码：

div class=' right _ center zbt ml10 ' div class=' tou ' ul class=' mt50 ' Li on mouse over=' chaneTab '(001)，new Array('002 ')，new Array('center_bj '，' ')' id='tab001' class='center_bj'a名山明星榜/a/Li Li在鼠标悬停时=' chaneTab '(002)，新数组(' 001 ')，新数组(' center_bj '，' ')' id='tab002'a热门群组/a/Li/ul/div div id=' con 001 ' style=' display : block；class=' right _ content 1 l bl br bb ' iframe width=' 680 ' height=' 391 '框架边框=' 0 ' scrolling=' no ' style=' margin-left :-1px；border=' 0 ' margin heat=' 0 ' margin width=' 0 ' src=' http : she qu/uchome/do。PHP？AC=Ajax op=getindex space/iframe/div div id=' con 002 ' style=' display : none；class=' right _ content 1 l bl br bb ' ol class=' mt10 ml10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=23 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis.src=src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142654112531。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=23 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '武林英雄官方群/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=23 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '/Li Li class=' ml5 '主题：span0/span，贴数：span 0/span/Li/ol class=' mt10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=14 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis.src=src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142678521940。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=14 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '游戏贴图/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=14 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '这里是维客分享与会员互动区。

您的./li li class='ml5 '主题：span0/span，贴数：span 0/span/Li/ol class=' mt10 ml10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=20 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/12814265524528。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=20 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '三国群英传官方群/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=20 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '/Li Li class=' ml5 '主题：span1/span，贴数：span 1/span/Li/ol class=' mt10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=18 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142657314254。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=18 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '飘渺仙剑客服群/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=18 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '/Li Li class=' ml5 '主题：span0/span，贴数：span 0/span/Li/ol class=' mt10 ml10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=17 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142658426959。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=17 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '武林英雄客服群/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=17 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '/Li Li class=' ml5 '主题：span1/span，贴数：span 1/span/Li/ol class=' mt10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=25 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/12814265147740。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=25 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '飘渺仙剑官方群/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=25 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '/Li Li class=' ml5 '主题：span0/span，贴数：span 0/span/Li/ol class=' mt10 ml10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=13 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142679512873。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=13 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '游戏交友/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=13 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '记录管理人员的意见或建议。

/li li class='ml5 '主题：span0/span，贴数：span 0/span/Li/ol class=' mt10 ' Li class=' quanzi _ pic ml10 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=15 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img one rror=' this。一个rror=nullthis . src=' src=' http :3358192。168 .0 .113/shequ/uchome/upload/2010-08/128142677312935。jpg/a/Li Li class=' ml5 ' a target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=15 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '游戏交易/a(今日：spana target=' _ blank ' href=' shequ/uchome/space。PHP？do=mtagtagid=15 ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' 0/a/span)/Li Li class=' ml5 '生活中的小窍门，都拿出来和大家分./li li class='ml5 '主题：span0/span，贴数：span0/span/li /ol /div /div效果图：

更多对JavaScript相关内容感兴趣的读者可以查看本网站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》和0103010

希望本文对JavaScript编程有所帮助。