jquery实现通用的内容渐显Tab选项卡效果_Javascript教程-查字典教程网

摘要：本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下：这是一款网页常用的TAB选项卡功能，无鼠标操作...

本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下：

这是一款网页常用的TAB选项卡功能，无鼠标操作的时候它可以自动轮换，美化一般，看上去有些粗糙，有兴趣使用的朋友可以进行细致修饰，相信会更漂亮的。

运行效果如下图所示：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/

具体代码如下：

<!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>通用TAB-有自动轮换功能</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <style type="text/css">  </style> <script> $(function() { $("#lxfTab-click .title li:first").addClass("cur"); $("#lxfTab-click .content li:not(:first)").hide(); $("#lxfTab-click .title li").click(function() { var index = $("#lxfTab-click .title li").index($(this)); $("#lxfTab-click .title li").removeClass("cur"); $(this).addClass("cur"); $("#lxfTab-click .content li").hide().eq(index).fadeIn("fast"); $(".now").text(index + 1); }); /* 自动轮换*/ var i = -1; //设置起始位置 var speed = 3000; //设置轮换速度 var n = $("#lxfTab-click .title li").length - 1; function autoroll() { if(i >= n) { i = -1; } i++; $("#lxfTab-click .title li").removeClass("cur").eq(i).addClass("cur"); $("#lxfTab-click .content li").hide().eq(i).fadeIn("fast"); timer = setTimeout(autoroll, speed); }; /* 鼠标悬停即停止自动轮换 */ function stoproll() { $("#lxfTab-click li").hover(function() { clearTimeout(timer); i = $(this).prevAll().length; }, function() { timer = setTimeout(autoroll, speed); }); }; autoroll(); //执行自动轮换函数 stoproll(); //启动悬停功能 }); </script> </head> <body> <div id="lxfTab-click"> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> <div> <ul> <li></li><li></li><li></li> </ul> </div> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </body> </html>

希望本文所述对大家的jquery程序设计有所帮助。