基于jquery的tab切換 js原理
更新時間：2010年04月01日 21:57:27 作者：
基于jquery的tab切換 使用的是js的原理。綁定鼠標經(jīng)過事件實現(xiàn)的。
html代碼:
<div class="details">
<ul class="tab"><li class="on" rel="a1"><b>個人資料</b></li><li rel="a2"><b>帳號維護</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>帳號維護</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)文章
這篇文章主要介紹了jQuery實現(xiàn)的自定義滾動條,結(jié)合完整實例詳細分析了jQuery自定義滾動條的實現(xiàn)步驟與相關(guān)操作技巧,并給出了jquery.jscroll.js插件的完整代碼,需要的朋友可以參考下2016-09-09
jquery動態(tài)添加option選項，還有動態(tài)刪除的方法，大家參考使用吧2013-12-12
jQuery實現(xiàn)表單動態(tài)加減、ajax表單提交功能
本篇文章主要講jQuery實現(xiàn)表單動態(tài)加減、ajax表單提交功能，本文主要分為兩部分： 一是頁面表單動態(tài)加減實現(xiàn)，二是復(fù)雜表單項提交到controller層。需要的朋友一起學(xué)習(xí)吧2018-06-06
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)儀表盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細介紹了jQuery初級教程之網(wǎng)站品牌列表效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
通過jquery的$.getJSON做一個跨域ajax請求試驗
jquery提供了$.getJSON的方法，讓我們可以實現(xiàn)跨域ajax請求，但jqueryAPI上的內(nèi)容實在太少，如何用$.getJSON，請求網(wǎng)站應(yīng)該返回怎樣的數(shù)據(jù)庫才能讓$.getJSON獲取到，下面我就用一個實際例子來說明下。2011-05-05
打造基于jQuery的高性能TreeView(asp.net)
項目中經(jīng)常會遇到樹形數(shù)據(jù)的展現(xiàn)，包括導(dǎo)航，選擇等功能，所以樹控件在大多項目中都是必須的。那一個實用的樹應(yīng)該具備什么功能呢？2011-02-02
jquery處理頁面彈出層查詢數(shù)據(jù)等待操作實例
這篇文章主要介紹了jquery處理頁面彈出層查詢數(shù)據(jù)等待操作,實例分析了jquery實現(xiàn)等待效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
JQuery是一個非常優(yōu)秀的框架，在特定場合下使用JQuery提交數(shù)據(jù)，相當(dāng)?shù)姆奖憧旖荨?但是，在處理一個GB2312編碼的網(wǎng)站AJAX提交時，中文數(shù)據(jù)卻成了亂碼。2010-07-07
jQuery的ajax方法非常好用，這么好的東西，你想擁有一個屬于自己的ajax么？接下來，我們來自己做一個簡單的ajax吧2017-01-01