jQuery实现tab标签自动切换的方法
本文实例讲述了jQuery实现tab标签自动切换的方法。分享给大家供大家参考。具体实现方法如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>jQuery实现的tab标签自动切换效果</title> <styletype="text/css"> *{ margin:0; padding:0; } dl{ margin:10pxauto; width:500px; line-height:24px; border-left:1pxsolid#dcdcdc; } dt.active{ border-bottom:1pxsolid#fff; position:relative; } dt{ padding:010px; float:left; border:1pxsolid#dcdcdc; border-left:0; cursor:pointer; margin-bottom:-1px; } dd{ clear:both; width:100%; border-left:0; border:1pxsolid#dcdcdc; border-left:0; display:none; } </style> </head> <body> <dl> <dt>nav1</dt> <dt>nav2</dt> <dt>nav3</dt> <dd>1111111111111111111111</dd> <dd>2222222222222222222222</dd> <dd>3333333333333333333333</dd> </dl> <scripttype="text/javascript"src="/html/txdm_2/images/20101004/jquery-1.2.6.min.js"></script> <scripttype="text/javascript"> $(document).ready(function(){ $('dt:first').addClass('active'); $('dd:first').css('display','block'); autoroll(); hookThumb(); }); vari=-1;//第i+1个tab开始 varoffset=2500;//轮换时间 vartimer=null; functionautoroll(){ n=$('dt').length-1; i++; if(i>n){ i=0; } slide(i); timer=window.setTimeout(autoroll,offset); } functionslide(i){ $('dt').eq(i).addClass('active').siblings().removeClass('active'); $('dd').eq(i).css('display','block').siblings('dd').css('display','none'); } functionhookThumb(){ $('dt').hover( function(){ if(timer){ clearTimeout(timer); i=$(this).prevAll().length; slide(i); } }, function(){ timer=window.setTimeout(autoroll,offset); this.blur(); returnfalse; } ); } </script> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。