本文實例講述了jquery實現通用的內容漸顯Tab選項卡效果。分享給大家供大家參考。具體如下：
這是一款網頁常用的TAB選項卡功能，無鼠標操作的時候它可以自動輪換，美化一般，看上去有些粗糙，有興趣使用的朋友可以進行細致修飾，相信會更漂亮的。
運行效果如下圖所示：
在線演示地址如下：
http://demo.VeVB.COm/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程序設計有所幫助。
新聞熱點
疑難解答
