jquery实现通用的内容渐显Tab选项卡效果

时间：2021-05-26

本文实例讲述了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"> <!-- * { padding:0; margin:0; list-style:none; } .cur { color:#000; background-color:#FFF; } .red { font-size: 20px; font-weight: bolder; } #lxfTab-click { -moz-border-radius:5px; background-color:#069; width:600px; overflow:hidden; padding:2px; margin-top:20px; margin-left:auto; margin-right:auto; } #lxfTab-click .title { color:#FFF; } #lxfTab-click .title li { float:left; padding:1px; cursor:pointer; width:40px; margin:8px 0 8px 8px; border:1px solid #FFF; -moz-border-radius:5px; text-align:center; } #lxfTab-click .content { width:600px; float:left; } #lxfTab-click .content li { word-wrap:break-word; background-color:#FFF; padding:6px; -moz-border-radius:5px; width: 572px; margin-top: 0px; margin-right: 8px; margin-bottom: 8px; margin-left: 8px; } --> </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 class="title"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> <div class="LRbutton"> <ul> <li></li><li></li><li></li> </ul> </div> <ul class="content"> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> <li> 5 </li> </ul> </div> </body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章