jquery写的一个TabControl类，动态创建选项卡切换Tab
初学jquery，如有错误，请高手们指出
想看效果及完整代码的可以下载rar包
下载地址：https://files.cnblogs.com/songye/TabControl.rar
创建TabControl
1 function TabControl(divname,tabId,tabcount,tabwidth,tabheight){//初始化，创建tab列和内容div
2 $("#"+divname).append("<div class='divtop' id="+tabId+"></div><div id=content"+tabId+"></div>");
3
4 $("#"+tabId).css("width",tabcount*100);
5 $("#content"+tabId).css({width: tabwidth, height: tabheight, border:"1px solid #b2c9d4"}); //高度宽度动态
6
7 this.AddTab=function(tabid,tabtitle,tabcontent,openor){//分别传ID,显示名称，内容，是否初始显示
8 $("#"+tabId).append("<div id="+tabid+" class='tabDiv'><span>"+tabtitle+"</span></div>");
9 $("#content"+tabId).append("<div class='divtab' id=content"+tabid+">"+tabcontent+"</div>");
10 //tab_Click(tabid);点击或移过
11 tab_Mouseover(tabid);
12 if(openor==true){
13 $("#"+tabid).addClass("tab_down");
14 $("#content"+tabid).removeClass("divtab");
15 $("#content"+tabid).addClass("divtab_down");
16 }
17 }
18
19 function tab_Click(tabid){//点击
20 $("#"+tabid).click(function(){
21 $("#"+tabId+">div").removeClass("tab_down");
22 $("#"+tabid).addClass("tab_down");
23 $("#content"+tabId+">div").removeClass("divtab_down");
24 $("#content"+tabId+">div").addClass("divtab");
25 $("#content"+tabid).removeClass("divtab");
26 $("#content"+tabid).addClass("divtab_down");
27 })
28 }
29
30 function tab_Mouseover(tabid){//移过
31 $("#"+tabid).mouseover(function(){
32 $("#"+tabId+">div").removeClass("tab_down");
33 $("#"+tabid).addClass("tab_down");
34 $("#content"+tabId+">div").removeClass("divtab_down");
35 $("#content"+tabId+">div").addClass("divtab");
36 $("#content"+tabid).removeClass("divtab");
37 $("#content"+tabid).addClass("divtab_down");
38 })
39 }
40
41 }
HTML前台代码1 <script type="text/javascript">
2 $(function(){
3 var cc=new TabControl("TabDiv",'v',4,398,300);//html中的div ID，TAB ID号，tab个数，宽度，高度
4 cc.AddTab('a','div',$("#a").html(),true);//为true的，加载时默认首页
5 cc.AddTab('b','Iframe',$("#b").html());
6 cc.AddTab('c','腾讯',"腾讯");
7 cc.AddTab('d','百度',"http://baidu.com");
8
10 var ccc=new TabControl("cccs",'sv',2,500,200);
11 ccc.AddTab('cc','创建第2个tab','测试两个之间的冲突',true);
12 ccc.AddTab('ccc','缺tab情况→','缺tab情况→→→→→→→→→→→→→');
13 });
14 </script>
