jquery Tab 选项卡通用函数

　　核心代码：

复制代码代码如下:

　　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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery14.js%22%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0A%2F%2Ftab(%22%23tri%22%2C%22li%22%2C%22%23game_con%22%2C%22div%22%2C%22click%22)%3B%20%0D%0A%2F%2Ftab(%22.tab_con%22%2C%22li%22%2C%22.tab_con%22%2C%22table%22)%3B%20%0D%0A%2F%2F%E7%94%A8%E7%B1%BB%E4%BD%9C%E4%B8%BA%E9%80%89%E6%8B%A9%E7%AC%A6%E8%99%BD%E7%84%B6%E6%95%88%E7%8E%87%E4%BD%8E%E7%82%B9%E4%BD%86%E6%98%AF%20%E5%8F%AF%E4%BB%A5%E5%A4%9A%E6%AC%A1%E9%87%8D%E7%94%A8%20%E8%BF%99%E4%B8%AA%E6%80%A7%E8%B4%A8%E4%B8%8D%E9%94%99%20%0D%0A%2F%2Ftab(%22%23tzxu%22%2C%22li%22%2C%22%23tzxn%22%2C%22div%22)%3B%20%0D%0A%2F%2F%E4%B8%8D%E8%BF%87%E6%9C%80%E5%A5%BD%E8%BF%98%E6%98%AF%E7%94%A8ID%E6%9D%A5%E5%81%9A%E9%80%89%E6%8B%A9%E7%AC%A6%20%E9%82%A3%E6%95%88%E7%8E%87%E9%AB%98%E7%82%B9%20%0D%0A%2F%2Ftab(%22%23vtag%22%2C%22li%22%2C%22%23vtagn%22%2C%22ul%22)%3B%20%0D%0A%0D%0A%0D%0Afunction%20cur(ele)%7B%20%0D%0A%24(ele).addClass(%22cur%22).siblings().removeClass(%22cur%22)%3B%20%0D%0A%7D%20%0D%0Afunction%20tab(id_tab%2Ctag_tab%2Cid_con%2Ctag_con%2Cact)%7B%20%0D%0A%24(id_tab).find(tag_tab).eq(0).addClass(%22cur%22)%3B%20%0D%0A%24(id_con).find(tag_con).eq(0).show().siblings(tag_con).hide()%3B%20%0D%0Aif(!act)%7B%20act%3D%22click%22%7D%3B%20%0D%0Aif(act%3D%3D%22click%22)%7B%20%0D%0A%24(id_tab).find(tag_tab).each(function(i)%7B%20%0D%0A%24(id_tab).find(tag_tab).eq(i).click(function()%7B%20%0D%0Acur(this)%3B%20%0D%0A%24(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide()%3B%20%0D%0A%7D)%20%0D%0A%7D)%20%0D%0A%7D%20%0D%0Aif(act%3D%3D%22mouseover%22)%7B%20%0D%0A%24(id_tab).find(tag_tab).each(function(i)%7B%20%0D%0A%24(id_tab).find(tag_tab).eq(i).mouseover(function()%7B%20%0D%0Acur(this)%3B%20%0D%0A%24(id_con).find(tag_con).eq(i).show().siblings(tag_con).hide()%3B%20%0D%0A%7D)%20%0D%0A%7D)%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%24(document).ready(function()%7B%20%0D%0Atab(%22%23tri%22%2C%22li%22%2C%22%23game_con%22%2C%22div%22%2C%22click%22)%3B%20%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
</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> 
内容glzy8.com 
</div> 
<div> 
内容s.glzy8.com 
</div> 
</div> 
</div> 
</body> 
</html>

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

教程首页更多教程