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 相关文章推荐
又一个小巧的图片预加载类
May 05 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
Oct 15 Javascript
javascript运行机制之this详细介绍
Feb 07 Javascript
jquery 新建的元素事件绑定问题解决方案
Jun 12 Javascript
JQuery中Ajax()的data参数类型实例分析
Dec 15 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
angular实现form验证实例代码
Jan 17 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 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提取数据库内容中的图片地址并循环输出
2010/03/21 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
IE8 原生JSON支持
2009/04/13 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
详解react服务端渲染(同构)的方法
2017/09/21 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
JS实现电脑虚拟键盘的操作
2020/06/24 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
jQuery实现简单轮播图效果
2020/12/27 jQuery
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
Python3网络爬虫中的requests高级用法详解
2019/06/18 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
Python bytes string相互转换过程解析
2020/03/05 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
CSS3 3D酷炫立方体变换动画的实现
2019/03/26 HTML / CSS
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
冬季安全检查方案
2014/05/23 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
小学生家长意见
2015/06/03 职场文书