jQuery實(shí)現(xiàn)tab標(biāo)簽自動(dòng)切換的方法
更新時(shí)間：2015年02月28日 11:04:07 作者：代碼家園
這篇文章主要介紹了jQuery實(shí)現(xiàn)tab標(biāo)簽自動(dòng)切換的方法,實(shí)例分析了jQuery操作tab標(biāo)簽的技巧,涉及addClass、siblings及removeClass鏈?zhǔn)讲僮鞯募记?需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)tab標(biāo)簽自動(dòng)切換的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<!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實(shí)現(xiàn)的tab標(biāo)簽自動(dòng)切換效果</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個(gè)tab開始
var offset = 2500; //輪換時(shí)間
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery實(shí)現(xiàn)的tab標(biāo)簽自動(dòng)切換效果</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個(gè)tab開始
var offset = 2500; //輪換時(shí)間
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>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- 最簡(jiǎn)單純JavaScript實(shí)現(xiàn)Tab標(biāo)簽頁切換的方式(推薦)
- 純css+js寫的一個(gè)簡(jiǎn)單的tab標(biāo)簽頁帶樣式
- js(JavaScript)實(shí)現(xiàn)TAB標(biāo)簽切換效果的簡(jiǎn)單實(shí)例
- 簡(jiǎn)單純js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- js實(shí)現(xiàn)點(diǎn)擊切換TAB標(biāo)簽實(shí)例
- JS實(shí)現(xiàn)常見的TAB、彈出層效果(TAB標(biāo)簽，斑馬線，遮罩層等)
- js實(shí)現(xiàn)的tab標(biāo)簽切換效果代碼分享
- javascript動(dòng)態(tài)添加刪除tabs標(biāo)簽的方法
- jQuery EasyUI API 中文文檔 - Tabs標(biāo)簽頁/選項(xiàng)卡
- jquery tab標(biāo)簽頁的制作
- jquery通過a標(biāo)簽刪除table中的一行的代碼
- jQuery EasyUI 布局之動(dòng)態(tài)添加tabs標(biāo)簽頁
- js與jquery分別實(shí)現(xiàn)tab標(biāo)簽頁功能的方法
相關(guān)文章
增強(qiáng)用戶體驗(yàn)友好性之jquery easyui window 窗口關(guān)閉時(shí)的提示
在項(xiàng)目中，客戶提出這么個(gè)要求，就是在關(guān)閉彈出的窗口的時(shí)候，如果點(diǎn)擊 紅X 或 取消按鈕 則提示 ”確認(rèn)保存了當(dāng)前的操作“ 這么個(gè)信息，否則就不提示啦2012-06-06
這篇文章主要介紹了jQuery中inArray方法注意事項(xiàng),結(jié)合實(shí)例形式分析了jQuery中inArray方法變量判斷的相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jquery datepicker參數(shù)介紹和示例,需要的朋友可以參考下2014-04-04
淺談如何實(shí)現(xiàn)easyui的datebox格式化
這篇文章主要和大家一起聊一聊如何實(shí)現(xiàn)easyui的datebox格式化的方法，感興趣的小伙伴們可以參考一下2016-06-06
我們通常在執(zhí)行一次ajax請(qǐng)求過后，需要更新界面上的某些內(nèi)容，一般通過動(dòng)態(tài)插入dom元素。2010-10-10
jQuery實(shí)現(xiàn)的別踩白塊小游戲完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的別踩白塊小游戲,結(jié)合實(shí)例形式詳細(xì)分析了jQuery針對(duì)頁面元素的計(jì)算、判定、動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法
這篇文章主要介紹了JQuery使用index方法獲取Jquery對(duì)象數(shù)組下標(biāo)的方法,涉及jQuery中index方法的使用技巧,需要的朋友可以參考下2015-05-05
基于jQuery實(shí)現(xiàn)咖啡訂單管理簡(jiǎn)單應(yīng)用
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)咖啡訂單管理的簡(jiǎn)單應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
jquery實(shí)現(xiàn)ajax提交表單信息的簡(jiǎn)單方法(推薦)
下面小編就為大家?guī)硪黄猨query實(shí)現(xiàn)ajax提交表單信息的簡(jiǎn)單方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了jQuery中:has選擇器用法,實(shí)例分析了:has選擇器的功能、定義及匹配技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12