jquery Tab 選項卡通用函數

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery Tab 選項卡通用函數

jquery Tab 選項卡通用函數

編輯：JQuery特效代碼

核心代碼：
代碼如下:
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");
});

演示代碼：運行後，需要刷新下，才能加載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> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
//tab("#tri","li","#game_con","div","click"); 
//tab(".tab_con","li",".tab_con","table"); 
//用類作為選擇符雖然效率低點但是 可以多次重用 這個性質不錯 
//tab("#tzxu","li","#tzxn","div"); 
//不過最好還是用ID來做選擇符 那效率高點 
//tab("#vtag","li","#vtagn","ul"); 
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"); 
}); 
</script> 
</head> 
<body> 
<div class="ngame"> 
<ul id="tri"> 
<li>百度</li> 
<li></li> 
<li>服務器軟件</li> 
</ul> 
<div id="game_con"> 
<div> 
<ul><li>·內容baidu.com</li></ul> 
</div> 
<div> 
內容poluoluo.com 
</div> 
<div> 
內容s.poluoluo.com 
</div> 
</div> 
</div> 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:jquery獲取input表單值的代碼
下一頁:jquery+json 通用三級聯動下拉列表

JQuery特效代碼

JQuery 實現的頁面滾動時浮動窗口控件: 1. Introduction: 這個控件能夠實現的效果是當你的頁面滾動時,某個DIV永遠停留在你需
分享20多個很棒的jQuery 文件上傳插件或教程: 1. PluploadPlupload 是一個Web浏覽器上的界面友好的文件上傳模塊，可顯示上傳進度
jQuery實現友好的輪播圖片特效: 先上效果圖：【處理】這裡的圖片滾動輪播，做了點小處理：當在第1頁狀態時，你點擊第5頁，圖片的滾動是

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章