jquery Tab 选项卡通用函数

325 阅读 0 评论 215 点赞

我是靠谱客的博主舒心楼房，这篇文章主要介绍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> 
 
 
</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> 
内容uoften.com 
</div> 
<div> 
内容s.uoften.com 
</div> 
</div> 
</div> 
</body> 
</html>

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