自动切换的TAB标签，jQuery代码

最新推荐文章于 2024-07-25 14:02:05 发布

aiyi7725

最新推荐文章于 2024-07-25 14:02:05 发布

阅读量105

点赞数

文章标签： xhtml javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/webshow/archive/2011/07/19/2110525.html

版权

自动切换的TAB标签，jQuery代码

一个自动切换的Tab标签，选项卡自动切换与其一样，引用了jQuery来实现，是一个新颖的版本，希望大家喜欢我的拙作。适合新手参考，在ie6,ie7,ff上通过测试；在此说明，想增加标签只要加就行了，代码不用改。

<!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>
<title>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>内容1</dd>
<dd>内容2</dd>
<dd>内容3</dd>
</dl>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.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>

posted on 2011-07-19 14:07 前端设计阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/webshow/archive/2011/07/19/2110525.html

aiyi7725

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自动切换的TAB标签，jQuery代码

自动切换的TAB标签，jQuery代码一个自动切换的Tab标签，选项卡自动切换与其一样，引用了jQuery来实现，是一个新颖的版本，希望大家喜欢我的拙作。适合新手参考，在ie6,ie7,ff上通过测试；在此说明，想增加标签只要加就行了，代码不用改。<...
复制链接

扫一扫