基于jquery的tab切換 js原理
更新時(shí)間:2010年04月01日 21:57:27 作者:
基于jquery的tab切換 使用的是js的原理。綁定鼠標(biāo)經(jīng)過(guò)事件實(shí)現(xiàn)的。
html代碼:
<div class="details">
<ul class="tab"><li class="on" rel="a1"><b>個(gè)人資料</b></li><li rel="a2"><b>帳號(hào)維護(hù)</b></li><li rel="a3"><b>在來(lái)個(gè)</b></li><li></li></ul>
<dl id="a1">11111111111111111111111111111111
</dl>
<dl id="a2" style="display:none">
22222222222222222222222222222222222
</dl>
<dl id="a3" style="display:none">3333333333333333333333333333333333333
</dl>
</div>
js代碼:
$(function(){
$(".tab>li").mouseover(function(){
$(".tab>li").removeClass("on");
$(this).addClass("on");
var target = $('#' + this.rel);
if (target.size() > 0) {
$('.details > dl').hide();
target.show();
} else {
alert('There is no such container.');
}
});
});
復(fù)制代碼 代碼如下:
<div class="details">
<ul class="tab"><li class="on" rel="a1"><b>個(gè)人資料</b></li><li rel="a2"><b>帳號(hào)維護(hù)</b></li><li rel="a3"><b>在來(lái)個(gè)</b></li><li></li></ul>
<dl id="a1">11111111111111111111111111111111
</dl>
<dl id="a2" style="display:none">
22222222222222222222222222222222222
</dl>
<dl id="a3" style="display:none">3333333333333333333333333333333333333
</dl>
</div>
js代碼:
復(fù)制代碼 代碼如下:
$(function(){
$(".tab>li").mouseover(function(){
$(".tab>li").removeClass("on");
$(this).addClass("on");
var target = $('#' + this.rel);
if (target.size() > 0) {
$('.details > dl').hide();
target.show();
} else {
alert('There is no such container.');
}
});
});
效果圖:
您可能感興趣的文章:
- 使用jquery實(shí)現(xiàn)div的tab切換實(shí)例代碼
- jQuery版Tab標(biāo)簽切換
- jQuery簡(jiǎn)單tab切換效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡(jiǎn)單演示
- jquery實(shí)現(xiàn)簡(jiǎn)單Tab切換菜單效果
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jquery移動(dòng)端TAB觸屏切換實(shí)現(xiàn)效果
- 基于jquery tab切換(防止頁(yè)面刷新)
- jQuery實(shí)現(xiàn)tab欄切換效果
相關(guān)文章
jQuery實(shí)現(xiàn)的自定義滾動(dòng)條實(shí)例詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)的自定義滾動(dòng)條,結(jié)合完整實(shí)例詳細(xì)分析了jQuery自定義滾動(dòng)條的實(shí)現(xiàn)步驟與相關(guān)操作技巧,并給出了jquery.jscroll.js插件的完整代碼,需要的朋友可以參考下2016-09-09jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能
本篇文章主要講jQuery實(shí)現(xiàn)表單動(dòng)態(tài)加減、ajax表單提交功能,本文主要分為兩部分: 一是頁(yè)面表單動(dòng)態(tài)加減實(shí)現(xiàn),二是復(fù)雜表單項(xiàng)提交到controller層。需要的朋友一起學(xué)習(xí)吧2018-06-06通過(guò)jquery的$.getJSON做一個(gè)跨域ajax請(qǐng)求試驗(yàn)
jquery提供了$.getJSON的方法,讓我們可以實(shí)現(xiàn)跨域ajax請(qǐng)求,但jqueryAPI上的內(nèi)容實(shí)在太少,如何用$.getJSON,請(qǐng)求網(wǎng)站應(yīng)該返回怎樣的數(shù)據(jù)庫(kù)才能讓$.getJSON獲取到,下面我就用一個(gè)實(shí)際例子來(lái)說(shuō)明下。2011-05-05打造基于jQuery的高性能TreeView(asp.net)
項(xiàng)目中經(jīng)常會(huì)遇到樹(shù)形數(shù)據(jù)的展現(xiàn),包括導(dǎo)航,選擇等功能,所以樹(shù)控件在大多項(xiàng)目中都是必須的。那一個(gè)實(shí)用的樹(shù)應(yīng)該具備什么功能呢?2011-02-02jquery處理頁(yè)面彈出層查詢(xún)數(shù)據(jù)等待操作實(shí)例
這篇文章主要介紹了jquery處理頁(yè)面彈出層查詢(xún)數(shù)據(jù)等待操作,實(shí)例分析了jquery實(shí)現(xiàn)等待效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQuery ajax的功能實(shí)現(xiàn)方法詳解
jQuery的ajax方法非常好用,這么好的東西,你想擁有一個(gè)屬于自己的ajax么?接下來(lái),我們來(lái)自己做一個(gè)簡(jiǎn)單的ajax吧2017-01-01