快捷導(dǎo)航

jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果

更新時(shí)間：2015年09月07日 16:17:46 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果,涉及jquery通過時(shí)間函數(shù)定時(shí)觸發(fā)頁面元素樣式變換的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)通用的內(nèi)容漸顯Tab選項(xiàng)卡效果。分享給大家供大家參考。具體如下：

這是一款網(wǎng)頁常用的TAB選項(xiàng)卡功能，無鼠標(biāo)操作的時(shí)候它可以自動(dòng)輪換，美化一般，看上去有些粗糙，有興趣使用的朋友可以進(jìn)行細(xì)致修飾，相信會(huì)更漂亮的。

運(yùn)行效果如下圖所示：

在線演示地址如下：

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-有自動(dòng)輪換功能</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);
 });
 /* 自動(dòng)輪換*/
 var i = -1;
 //設(shè)置起始位置
 var speed = 3000;
 //設(shè)置輪換速度
 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);
 };
 /* 鼠標(biāo)懸停即停止自動(dòng)輪換 */
 function stoproll() {
  $("#lxfTab-click li").hover(function() {
  clearTimeout(timer);
  i = $(this).prevAll().length;
  }, function() {
  timer = setTimeout(autoroll, speed);
  });
 };
 autoroll();
 //執(zhí)行自動(dòng)輪換函數(shù)
 stoproll();
 //啟動(dòng)懸停功能
 });
 </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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: