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