快捷導(dǎo)航

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

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

用類(lèi)作為選擇符雖然效率低點(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="ublnpf9mb"   class="ngame"> <ul id="tri"> <li>百度</li> <li>腳本之家</li> <li>服務(wù)器軟件</li> </ul> <div   class="ublnpf9mb"   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í)行]

您可能感興趣的文章: