教程集 > 脚本编程 > javascript > 正文 jQuery自动切换/点击切换选项卡效果代码

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

发布时间：2016-11-28 编辑：jiaochengji.com

教程集为您提供jQuery自动切换/点击切换选项卡效果代码等资源，欢迎您收藏本站，我们将为您提供最新的jQuery自动切换/点击切换选项卡效果代码资源

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

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <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); } <h1>点击切换和自动切换选项卡</h1> <h3>2秒会自动切换</h3>

<li>jQuery eq和get区别和使用方法</li> <li>修改新版本emlog使用老版本kindeditor编辑器</li> <li>PHP获取网页内容的方法</li> <li>emlog热门日志修改</li> <li>[emlog编辑器]TQEditor for emlog</li> <li>emlog后台关键词（keywords）清空bug</li> <li>[emlog编辑器]ueditor for emlog v3.5</li> <li>[emlog编辑器]xhEditor for emlog</li>

<li>中兴F460光猫破解超级管理员</li> <li>中兴光纤猫F460桥接和路由模式设置</li> <li>windows安装PHP5.4.8 Apache2.4.3 Mysql5.5.28</li> <li>Yahoo邮箱POP3、SMTP开通以及设置方法</li> <li>固定IP用户架设代理服务器</li> <li>TeamSpeak 3简单架设</li> <li>[emlog编辑器]ueditor for emlog v3.5</li> <li>“键入的打印机名不正确”的解决方法</li>

<li>星知苑博客程序改版通知</li> <li>开机提示NTLDR is missing 的解决办法</li> <li>CentOS 6.0 安装 LAMP(Apache MySQL PHP)</li> <li>Yahoo邮箱POP3、SMTP开通以及设置方法</li> <li>无法使用shutdown命令的问题</li> <li>天寻 - 30MB全能空间</li> <li>html代码大全</li> <li>win7开启telnet命令</li>

</body></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jquery自动切换tabs选项卡的实现代码
 JQuery Tab选项卡效果代码改进版
 jquery自动切换tabs选项卡的具体实现
 jQuery自动切换/点击切换选项卡效果代码
 40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
 40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
 基于jQuery的可用于选项卡及幻灯的切换插件
 基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
 JQuery TabContainer
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二

上一篇：Javascript 拖动效果兼容火狐下一篇：二级菜单

[关闭]

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

最近更新

浏览排行