快捷導(dǎo)航

jquery Tab 選項(xiàng)卡通用函數(shù)

更新時(shí)間：2010年04月19日 22:15:02 作者：

用類作為選擇符雖然效率低點(diǎn)但是可以多次重用這個(gè)性質(zhì)不錯(cuò)

核心代碼：

function cur(ele){ 
$(ele).addClass("cur").siblings().removeClass("cur"); 
} 
function tab(id_tab,tag_tab,id_con,tag_con,act){ 
$(id_tab).find(tag_tab).eq(0).addClass("cur"); 
$(id_con).find(tag_con).eq(0).show().siblings(tag_con).hide(); 
if(!act){ act="click"}; 
if(act=="click"){ 
$(id_tab).find(tag_tab).each(function(i){ 
$(id_tab).find(tag_tab).eq(i).click(function(){ 
cur(this); 
$(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide(); 
}) 
}) 
} 
if(act=="mouseover"){ 
$(id_tab).find(tag_tab).each(function(i){ 
$(id_tab).find(tag_tab).eq(i).mouseover(function(){ 
cur(this); 
$(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide(); 
}) 
}) 
} 
} 
$(document).ready(function(){ 
tab("#tri","li","#game_con","div","click"); 
});

演示代碼：運(yùn)行后，需要刷新下，才能加載jquery

<!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=gb2312" /> <title></title> <link rel="stylesheet" href="style/enter.css" type="text/css" /> <style type="text/css"> .cur{color:red;border-bottom:2px solid green;background:blue;} #ngame{ width:500px; } #tri{ width:500px; background:#f1f1f1; margin:0; padding:0; cursor:pointer; } #tri li{ float:left; font-size:12px; padding:2px; margin-right:10px; color:#000; } #game_con{ width:498px; height:80px; border:1px solid #f1f1f1; font-size:14px; } #game_con div ul{ margin:0; padding:0; list-style-type:none; font-size:14px; } </style>   </head> <body> <div   id="wppm3vysvbp"   class="ngame"> <ul id="tri"> <li>百度</li> <li>腳本之家</li> <li>服務(wù)器軟件</li> </ul> <div   class="wppm3vysvbp"   id="game_con"> <div> <ul><li>·內(nèi)容baidu.com</li></ul> </div> <div> 內(nèi)容jb51.net </div> <div> 內(nèi)容s.jb51.net </div> </div> </div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

jQuery層次選擇器選擇元素使用介紹
層次選擇器:通過(guò)DOM元素間的層次關(guān)系獲取元素，其主要的層次關(guān)系包括后代、父子、相鄰、兄弟關(guān)系，通過(guò)其中基類關(guān)系可以方便快捷地定位元素，感興趣的朋友可以了解下
2013-04-04
利用js(jquery)操作Cookie的方法說(shuō)明
本篇文章主要是對(duì)利用js(jquery)操作Cookie的方法進(jìn)行了詳細(xì)的說(shuō)明介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
Jquery操作Ajax方法小結(jié)
這篇文章主要介紹了Jquery操作Ajax方法小結(jié)的相關(guān)資料,需要的朋友可以參考下
2015-11-11
jQuery實(shí)現(xiàn)提示密碼強(qiáng)度的代碼
本文給大家介紹的是一個(gè)非常常見(jiàn)的功能，在輸入密碼的時(shí)候提示密碼的強(qiáng)度，本文使用jQuery來(lái)實(shí)現(xiàn)，有需要的小伙伴可以參考下。
2015-07-07
jQuery動(dòng)態(tài)背景圖片效果實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery動(dòng)態(tài)背景圖片效果實(shí)現(xiàn)方法,涉及javascript隨機(jī)數(shù)及動(dòng)態(tài)設(shè)置css樣式的相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-07-07
jQuery對(duì)象的selector屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的selector屬性用法,實(shí)例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對(duì)象的具體實(shí)現(xiàn)，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
自定義jquery模態(tài)窗口插件無(wú)法在頂層窗口顯示問(wèn)題
自定義一個(gè)jquery模態(tài)窗口插件只能在mainFrame窗口中顯示，無(wú)法在頂層窗口顯示
2014-05-05
基于jQuery的彈出消息插件 DivAlert之旅（一）
這個(gè)DivAlert插件，顧名思義就是頁(yè)面彈出框，也就相當(dāng)于Winform里面MessageBox.Show()那樣的東西。
2010-04-04
Jquery結(jié)合HTML5實(shí)現(xiàn)文件上傳
本文給大家介紹的是利用Jquery使用HTML5的FormData屬性實(shí)現(xiàn)對(duì)文件的上傳的方法和實(shí)例，非常的實(shí)用，有需要的小伙伴可以參考下。
2015-06-06