这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现的 tab 切换选项卡效果, 结合具体实例形式分析了 JS 通过鼠标事件触发自定义函数控制页面元素样式变换实现 tab 切换功能的相关实现技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现的 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>
- ,贴数:
- <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">
- 这里是维客分享与会员互动区。您的...
- </li>
- <li class="ml5">
- 主题:
- <span>
- 0
- </span>
- ,贴数:
- <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>
- ,贴数:
- <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>
- ,贴数:
- <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>
- ,贴数:
- <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>
- ,贴数:
- <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>
- ,贴数:
- <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>
- ,贴数:
- <span>
- 0
- </span>
- </li>
- </ol>
- </div>
- </div>
效果图:
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0707/327225.html