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


Posted in Javascript onFebruary 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
CLASS_CONFUSION JS混淆 全源码
Dec 12 Javascript
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 Javascript
js/jQuery对象互转(快速操作dom元素)
Feb 04 Javascript
html组件不可输入(只读)同时任何组件都有效
Apr 01 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
小米公司JavaScript面试题
Dec 29 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
vue v-for出来的列表,点击某个li使得当前被点击的li字体变红操作
Jul 17 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 #Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 #Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 #Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 #Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 #Javascript
常用的JavaScript模板引擎介绍
Feb 28 #Javascript
JavaScript操作Cookie详解
Feb 28 #Javascript
You might like
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
Code:findPosX 和 findPosY
2006/12/20 Javascript
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
jQuery 滑动方法slideDown向下滑动元素
2014/01/16 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript实现点击自动选择TextArea文本的方法
2015/07/02 Javascript
js随机生成字母数字组合的字符串 随机动画数字
2015/09/02 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
bootstrap学习笔记之初识bootstrap
2016/06/21 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
js选项卡的制作方法
2017/01/23 Javascript
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
node.js实现微信开发之获取用户授权
2019/03/18 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
2019/09/24 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
[02:20]DOTA2亚洲邀请赛 IG战队出场宣传片
2015/02/07 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中应该使用%还是format来格式化字符串
2018/09/25 Python
pandas计数 value_counts()的使用
2019/06/24 Python
Python自动采集微信联系人的实现示例
2020/02/28 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
自行车租赁公司创业计划书
2014/01/28 职场文书
体育教师自我鉴定
2014/02/12 职场文书
行政管理毕业生自荐信
2014/02/24 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
python中的3种定义类方法
2021/11/27 Python
python热力图实现的完整实例
2022/06/25 Python
如何利用python创作字符画
2022/06/25 Python