tab标签自动切换（jquery） - 网页特效代码演示

当前位置：网页特效 > 网页特效演示页

菜单导航特效日期时间特效背景图像特效图层样式特效鼠标特效代码页面窗口特效色彩表格特效文字特效代码表单按钮特效计数转换特效游戏网页特效实例网页特效

tab标签自动切换（jquery） - 网页特效代码演示 - 特效代码运行

适合新手~~石ie6,ie7,ff上通过测试,想增加标签只要加<dt><dd>就行了，代码不用改。
PS:请另存为页面再打开，直接在论坛打开有问题。
以下是HTML网页特效代码，点击运行按钮可查看效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { margin:0; padding:0; } dl { margin:10px auto; width:500px; line-height:24px; border-left:1px solid #dcdcdc; } dt.active { border-bottom:1px solid #fff; position:relative; } dt { padding:0 10px; float:left; border:1px solid #dcdcdc; border-left:0; cursor:pointer; margin-bottom:-1px; } dd { clear:both; width:100%; border-left:0; border:1px solid #dcdcdc; border-left:0; display:none; } </style> </head> <body> <dl> <dt>nav1</dt> <dt>nav2</dt> <dt>nav3</dt> <dd>内容1</dd> <dd>内容2</dd> <dd>内容3</dd> </dl> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('dt:first').addClass('active'); $('dd:first').css('display','block'); autoroll(); hookThumb(); }); var i=-1; //第i+1个tab开始 var offset = 2500; //轮换时间 var timer = null; function autoroll(){ n = $('dt').length-1; i++; if(i > n){ i = 0; } slide(i); timer = window.setTimeout(autoroll, offset); } function slide(i){ $('dt').eq(i).addClass('active').siblings().removeClass('active'); $('dd').eq(i).css('display','block').siblings('dd').css('display','none'); } function hookThumb(){ $('dt').hover( function () { if (timer) { clearTimeout(timer); i = $(this).prevAll().length; slide(i); } }, function () { timer = window.setTimeout(autoroll, offset); this.blur(); return false; } ); } </script> </body> </html> <a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>
[提示：可先修改代码再按运行]

当前位置：网页特效 > 网页特效演示页

tab标签自动切换（jquery） - 网页特效代码演示 - 特效代码运行

刚被其它网友点击的网页特效

搜索查询面板

本月特效排行

本周特效排行

本日特效排行