jQuery点击切换/自动切换选项卡效果js代码

发布时间：2015-09-04 11:46:12　来源/作者：学技巧网页制作　分类：导航菜单阅读：0次点评一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>点击切换和自动切换选项卡</title> <style type="text/css"> a {text-decoration:none;} a:link {color:#333333;} a:visited {color:#666666;} a:hover {color:#FF7D00;text-decoration:none;} a:active {color:red;text-decoration:none;} .tab1{width:301px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;} .menu{width:300px;background:#eee;height:28px;border-right:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;} .menu ul,.menudiv li{list-style:none;margin:0;padding:0;overflow:hidden} .menu li{float:left;width:99px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-left:#A8C29F solid 1px;color:#666;font-size:14px;overflow:hidden} .menudiv{width:299px;height:270px;border-left:#A8C29F solid 1px;border-right:#A8C29F solid 1px;border-top:0;background:#fefefe} .menudiv div{padding:10px;line-height:28px;} .menudiv li{text-align:left;font-size:14px;overflow:hidden} .tag_current{background:#A8C29F;color:#fff;font-weight:bold} </style> <script type="text/javascript"> function setTab(name,cursel){ for(var i=1; i<=links_len; i++){ var menu = document.getElementById(name+i); var menudiv = document.getElementById("tag_"+name+"_"+i); if(i==cursel){ menu.className="tag_current"; menudiv.style.display="block"; } else{ menu.className=""; menudiv.style.display="none"; } } } function Next(){ cursel++; if (cursel>links_len)cursel=1 setTab(name,cursel); } var name='one'; var cursel=1; var ScrollTime=2000;//循环周期（毫秒） onload=function(){ var links = document.getElementById("menu").getElementsByTagName('li') links_len=links.length; for(var i=0; i<links_len; i++){ links[i].onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } } document.getElementById("tag_"+name+"_"+links_len).parentNode.onmouseover=function(){ clearInterval(iIntervalId); this.onmouseout=function(){ iIntervalId = setInterval(Next,ScrollTime);; } } setTab(name,cursel); iIntervalId = setInterval(Next,ScrollTime); } </script> </head> <body> <Div align="center"><h1>点击切换和自动切换选项卡</h1> <h3>2秒会自动切换</h3> <div class="tab1" id="tab1"> <div class="menu" id="menu"> <ul> <li id="one1" onclick="setTab('one',1)">学技巧</li> <li id="one2" onclick="setTab('one',2)">点击看看</li> <li id="one3" onclick="setTab('one',3)">会自动的</li> </ul> </div> <div class="menudiv"> <div id="tag_one_1"> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2014488.html">如何提高网站pv浏览量</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/texiao/2014633.html">网页图片放大镜特效</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/texiao/2014535.html">网页超过一屏时导航自动浮动在网页最上方的网</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/201317.html">织梦实现点击文章图片进入下一页和下一篇的跳</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/texiao/2014382.html">JS混淆工具</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/cmsmuban/2014793.html">PHP健康之家医疗问答DEDECMS网站模板</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2014492.html">DeDeCMS织梦后台版权广告去除方法</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/cmsmuban/2014605.html">极品美女网站源码,正妹图片网dedecms模板(带整站</a></li> </div> <div id="tag_one_2" style="display:none;"> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2014651.html">IE8中GBK2312转UTF-8乱码及解决方案</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/video/2014745.html">PS将普通照片裁剪成证件照的技巧</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2015810.html">解决phpmyadmin中缺少mysqli扩展问题的方法</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/201371.html">DedeCms5.7发布文章时输入Tag标签逗号自动变成英文</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2015809.html">dedecms系统TAG标签按栏目调用,只显当前栏目tags标</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2015808.html">IIS7无法显示页面，HTTP错误500，因为发生内部服务</a></li> <li><a target="_blank" href="http://www.xuejiqiao.com/jiaocheng/2015807.html">PHP调用时间和当前的时区时间对不上设置方法</a></li> <li><a target="_blank" title="DedeCms织梦后台/PHP页面打开空白最终解决办法" href="http://www.xuejiqiao.com/jiaocheng/2015806.html">DedeCms织梦后台/PHP页面打开空白最终解决办法</a></li> </div> <div id="tag_one_3" style="display:none;"> <li><a href="/post-318.html">星知苑博客程序改版通知</a></li> <li><a target="_blank" title="PHP网站打开空白,提示找不到文件错误或500错误的原因和解决方法" href="http://www.xuejiqiao.com/jiaocheng/2015805.html">PHP网站打开空白,提示找不到文件错误或500错误的</a></li> <li><a target="_blank" title="PHP打开显示空白的问题分析" href="http://www.xuejiqiao.com/jiaocheng/2015804.html">PHP打开显示空白的问题分析</a></li> <li><a target="_blank" title="织梦dedecms修改tag标签默认12个字节的长度" href="http://www.xuejiqiao.com/jiaocheng/2015803.html">织梦dedecms修改tag标签默认12个字节的长度</a></li> <li><a target="_blank" title="DEDECMS织梦首页列表页调用文章TAG标签的方法" href="http://www.xuejiqiao.com/jiaocheng/2015802.html">DEDECMS织梦首页列表页调用文章TAG标签的方法</a></li> <li><a target="_blank" title="医院预约挂号系统dedecms插件" href="http://www.xuejiqiao.com/chajian/2014629.html">医院预约挂号系统dedecms插件</a></li> <li><a target="_blank" title="PHP-DDOS脚本专杀工具" href="http://www.xuejiqiao.com/chajian/2014622.html">PHP-DDOS脚本专杀工具</a></li> <li><a target="_blank" title="织梦整合最新版Ueditor详细步骤及文件下载" href="http://www.xuejiqiao.com/chajian/2014581.html">织梦整合最新版Ueditor详细步骤及文件下载</a></li> <li><a target="_blank" title="dedecms仿百度商桥在线留言管理插件" href="http://www.xuejiqiao.com/chajian/2014560.html">dedecms仿百度商桥在线留言管理插件</a></li> </div> </div> </div> </Div> </body></td> </tr> </table>

(www.xuejiqiao.com)提示：可修改后再运行代码!

本文章特效来给大家介绍利用jquery实现选项卡切换效果，他可以自动切换也可以手动点击切换，有需要了解的朋友可参考。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

jQuery点击切换/自动切换选项卡效果js代码

jQuery点击切换/自动切换选项卡效果js代码

一段实用简洁大方滑动的Tab选项卡JS特效代码