TabStyle.css
@charset "utf-8";
body {
FONT-SIZE: 12pt;
}
.tabDiv{
float:left;
width:98px;
height:20px;
background-color:#e1eaf6;
border:1px solid #b2c9d4;
text-align:center;
padding-top:3px;
cursor:pointer;
}
.divtop{
height:23px
}
.divtab{
display:none;
}
.divtab_down{
display:block;
border-bottom:1px solid #FFFFFF;
height:200px;
width:200px;
}
.tab_down {
background-color:#f7f7f7;
border-bottom:1px solid #FFFFFF;
}
span {
font-size:12px;
color:#215dc6;
}
A:link {
TEXT-DECORATION: none;
}
A:visited {
TEXT-DECORATION: none;
}
A:active {
TEXT-DECORATION: none;
}
A:hover {
COLOR: red;
}
TabControl.js
function TabControl(divname,tabId,tabcount,tabwidth,tabheight){//初始化，创建tab列和内容div
$("#"+divname).append("<div class='divtop' id="+tabId+"></div><div id=content"+tabId+"></div>");
$("#"+tabId).css("width",tabcount*100);
$("#content"+tabId).css({width: tabwidth, height: tabheight, border:"1px solid #b2c9d4"}); //高度宽度动态
this.AddTab=function(tabid,tabtitle,tabcontent,openor){//分别传ID,显示名称，内容，是否初始显示
$("#"+tabId).append("<div id="+tabid+" class='tabDiv'><span>"+tabtitle+"</span></div>");
$("#content"+tabId).append("<div class='divtab' id=content"+tabid+">"+tabcontent+"</div>");
//tab_Click(tabid);点击或移过
tab_Mouseover(tabid);
if(openor==true){
$("#"+tabid).addClass("tab_down");
$("#content"+tabid).removeClass("divtab");
$("#content"+tabid).addClass("divtab_down");
}
}
function tab_Click(tabid){//点击
$("#"+tabid).click(function(){
$("#"+tabId+">div").removeClass("tab_down");
$("#"+tabid).addClass("tab_down");
$("#content"+tabId+">div").removeClass("divtab_down");
$("#content"+tabId+">div").addClass("divtab");
$("#content"+tabid).removeClass("divtab");
$("#content"+tabid).addClass("divtab_down");
})
}
function tab_Mouseover(tabid){//移过
$("#"+tabid).mouseover(function(){
$("#"+tabId+">div").removeClass("tab_down");
$("#"+tabid).addClass("tab_down");
$("#content"+tabId+">div").removeClass("divtab_down");
$("#content"+tabId+">div").addClass("divtab");
$("#content"+tabid).removeClass("divtab");
$("#content"+tabid).addClass("divtab_down");
})
}
}
demo.html
<!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=utf-8" />
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript" src="TabControl.js"></script>
<link rel="stylesheet" type="text/css" href="CSS/TabStyle.css"/>
<script type="text/javascript">
$(function(){
var cc=new TabControl("TabDiv",'v',4,398,300);//html中的div ID，TAB ID号，tab个数，宽度，高度
cc.AddTab('aa','div',$("#a").html(),true);//为true的，加载时默认首页
cc.AddTab('bb','Iframe',$("#b").html());
cc.AddTab('c','腾讯',"腾讯");
cc.AddTab('d','百度',"http://baidu.com");
var ccc=new TabControl("cccs",'sv',2,500,200);
ccc.AddTab('cc','创建第2个tab','测试两个之间的冲突',true);
ccc.AddTab('ccc','缺tab情况→','缺tab情况→→→→→→→→→→→→→');
});
</script>
<title>test</title>
</head>
<body>
<div id="TabDiv"></div>
<br/>
<div id="cccs"></div>
<div style="display:none;" id="a">
<div style="background-color:#006699">div1</div>
<div style="background-color:#FF9966;width:380px">var cc=new TabControl(tab个数,内容宽度,内容高度);</div>
<div style="background-color:#33FF00">$("#a").html()传div</div>
</div>
<div style="display:none" id="b">
<iframe style="width:388px;height:260px" src="http://s.jb51.net" frameborder='0'></iframe>
</div>
</body>
</html>
