信鸽网

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

  作者：bea

本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果。分享给大家供大家参考。具体如下： 这是一款网页常用的TAB选项卡功能，无鼠标操作的时候它可以自动轮换，美化一般，看上去有些粗糙，有兴趣使用的朋友可以进行细致修饰，相信会更漂亮的。 运行效果如下图所示： 在线演示地址如下： http://demo./js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//

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


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


运行效果如下图所示：



在线演示地址如下：


http://demo./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程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: