基于jquery的tab切換 js原理
更新時(shí)間：2010年04月01日 21:57:27 作者：
基于jquery的tab切換 使用的是js的原理。綁定鼠標(biāo)經(jīng)過事件實(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>在來個(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>在來個(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簡單tab切換效果實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)的Tab滑動(dòng)選項(xiàng)卡及圖片切換(多種效果)小結(jié)
- jQuery實(shí)現(xiàn)TAB選項(xiàng)卡切換特效簡單演示
- jquery實(shí)現(xiàn)簡單Tab切換菜單效果
- jquery-easyui關(guān)閉tab自動(dòng)切換到前一個(gè)tab
- jquery移動(dòng)端TAB觸屏切換實(shí)現(xiàn)效果
- 基于jquery tab切換(防止頁面刷新)
- jQuery實(shí)現(xiàn)tab欄切換效果
相關(guān)文章
Easyui和zTree兩種方式分別實(shí)現(xiàn)樹形下拉框
最近工作中需要用到樹形下拉框，因?yàn)轫?xiàng)目中樹形結(jié)構(gòu)使用的是zTree，效果不是很好看，于是想著使用easyui的comboTree，雖然效果達(dá)到了，但是風(fēng)格和bootstrap不搭，下面把這兩種方式的效果分享到腳本之家平臺(tái)供大家參考2017-08-08
這篇文章主要介紹了JQuery顯示、隱藏div的幾種方法簡明總結(jié),本文總結(jié)了控制style、控制CSS、JQuery自帶方法等幾種顯示、隱藏div的方法,需要的朋友可以參考下2015-04-04
jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格
jQuery EasyUI API 中文文檔 - PropertyGrid屬性表格使用介紹，需要的朋友可以參考下。2011-11-11
jQuery 1.9移除了$.browser可以使用$.support來替代
這篇文章主要介紹jQuery 1.9 移除了 $.browser 的替代方法,需要的朋友可以參考下2014-09-09
jQuery學(xué)習(xí)筆記之控制頁面實(shí)現(xiàn)代碼
每一段jQuery對應(yīng)一段html代碼，以標(biāo)記為準(zhǔn)則,css為共用代碼，每段代碼需獨(dú)立運(yùn)行。html和css代碼在文章尾部，如下例2012-02-02
淺談jquery采用attr修改form表單enctype不起作用的問題
下面小編就為大家?guī)硪黄獪\談jquery采用attr修改form表單enctype不起作用的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動(dòng)展開與隱藏效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滑過鏈接控制圖片的滑動(dòng)展開與隱藏效果,涉及jQuery鼠標(biāo)事件的響應(yīng)及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jQuery ReferenceError: $ is not defined 錯(cuò)誤的處理辦法
今天開始要學(xué)習(xí)jQuery，寫第一個(gè)Hello Word時(shí)，居然jQuery ReferenceError: $ is not defined2013-05-05
jQuery插件jPaginate實(shí)現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個(gè)ie啊。2015-05-05
標(biāo)簽云想必大家都有見到過吧，那么3D標(biāo)簽云，有沒有接觸過呢？本例為大家介紹下通過jquery 實(shí)現(xiàn)的3D標(biāo)簽云，感興趣的朋友可以參考下2014-06-06