您的位置：首页 > Web前端 > JQuery

jQuery实现tab标签自动切换的方法

2015-02-28 00:00 866 查看

本文实例讲述了jQuery实现tab标签自动切换的方法。分享给大家供大家参考。具体实现方法如下：

<!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>jQuery实现的tab标签自动切换效果</title>

<style type="text/css">

* {

 margin:0;

 padding:0;

}

dl {

 margin:10px auto;

 width:500px;

 line-height:24px;

 border-left:1px solid #dcdcdc;

}

dt.active {

 border-bottom:1px solid #fff;

 position:relative;

}

dt {

 padding:0 10px;

 float:left;

 border:1px solid #dcdcdc;

 border-left:0;

 cursor:pointer;

 margin-bottom:-1px;

}

dd {

 clear:both;

 width:100%;

 border-left:0;

 border:1px solid #dcdcdc;

 border-left:0;

 display:none;

}

</style>

</head>

<body>

<dl>

  <dt>nav1</dt>

  <dt>nav2</dt>

  <dt>nav3</dt>

  <dd>1111111111111111111111</dd>

  <dd>　2222222222222222222222</dd>

  <dd>　　3333333333333333333333</dd>

</dl>

<script type="text/javascript" src="/html/txdm_2/images/20101004/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('dt:first').addClass('active');

 $('dd:first').css('display','block');

 autoroll();

 hookThumb();

});

var i=-1; //第i+1个tab开始

var offset = 2500; //轮换时间

var timer = null;

function autoroll(){

 n = $('dt').length-1;

 i++;

 if(i > n){

 i = 0;

 }

 slide(i);

    timer = window.setTimeout(autoroll, offset);

 }

function slide(i){

 $('dt').eq(i).addClass('active').siblings().removeClass('active');

 $('dd').eq(i).css('display','block').siblings('dd').css('display','none');

 }

function hookThumb(){    

 $('dt').hover(

  function () {

    if (timer) {

                clearTimeout(timer);

    i = $(this).prevAll().length;

             slide(i); 

            }

  },

  function () {

      

            timer = window.setTimeout(autoroll, offset);  

            this.blur();            

            return false;

  }

); 

}

</script>

</body>

</html>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航