tab标签自动切换（jquery）

稿源：互联网 2022-04-09 07:14:48 点击： 5764 撤稿纠错

tab标签自动切换效果，用户体验不错。

以下讨论的是和切换特效相关的tab标签自动切换（jquery）教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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）的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/20081027360.shtml方便下次再访问哦。

·上一篇： 可刷新的JS树形菜单特效
·下一篇： 一个层的伸缩效果

tab标签自动切换（jquery）

文章分类LIST >>返回首页

最新游戏

最新新闻