选项卡效果，动态添加·

<style type="text/css">
body,td,th {font-size: 12px;}
.li1{float:left; display:block;  padding:5px; border-right:1px solid #A8C29F; border-bottom:1px solid #A8C29F; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081017/114338284.p.gif); text-align:center; color:#949694; cursor:pointer;}
.li2{float:left; display:block;  padding:5px; border-right:1px solid #A8C29F;  background-color:#FFFFCC;background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20081017/114903878.p.gif);text-align:center ;font-weight:bold;color:#949694; cursor:pointer;}
.div1{height:100%; padding:10px;}
.div2{height:100%;display:none; padding:10px;}
#div{width:100%; height:100%; border-bottom:1px solid #A8C29F; border-left: 1px solid #A8C29F; border-right:1px solid #A8C29F;}
#ul{ list-style:none; padding:0px;margin:0px;border:1px solid #A8C29F;border-right:none; height:25px; border-bottom:none}
</style>
<div id="all" style="height:200px;  padding:0px;"></div>
<br><br><br>
<input  value="add" type="button" οnclick="jia(document.getElementById('title').value,document.getElementById('content').value)" />
标题：
<input type="text" id="title" />
内容：
<input type="text" id="content"/>
<script>
function Tab(id,width){  // id为父元素Id   width为选项卡的宽度
this.parentId = id
this.width =width
}

Tab.prototype.createTab=function(num,con,title){  //num为选项卡的个树   con为对应内容的叔祖  title为对应标题
document.getElementById(this.parentId).style.width=this.width*num +1     //得到父div的宽度

var title = document.createElement("div")                            
document.getElementById(this.parentId).appendChild(title)                //创建 包含标题栏的div

var content = document.createElement("div")
content.id="div"
document.getElementById(this.parentId).appendChild(content)              //创建 包含内容的div

var ul = document.createElement("ul")
ul.id ="ul"
title.appendChild(ul)                                                      //创建Ul

for(var i=0;i<num;i++)                                 //循环输出title和content
 {
    if(i==0)
    {
        var li = document.createElement("li")
        li.className="li2"
        li.οnclick= function(){change(event.srcElement)};
        //li.innerHTML=title[i]
        li.innerHTML = con[i]
        li.style.width=this.width
        ul.appendChild(li)
       
        var div1 = document.createElement("div")
        div1.className = "div1"
        div1.innerHTML = con[i]
        content.appendChild(div1)
    }
    else
    {
        var li = document.createElement("li")
        li.className="li1"
        //li.innerHTML=title[i]  为什么title[i]取不到直，但是con[i]取的到了？？？ 不明白
        li.innerHTML = con[i]
        li.οnclick= function(){change(event.srcElement)};
        li.style.width=this.width
        ul.appendChild(li)
       
        var div2 = document.createElement("div")
        div2.className = "div2"
        div2.innerHTML = con[i]
        content.appendChild(div2)
    }
 }
}

Tab.prototype.add=function(title,content){  // 功能是添加一个选项卡
document.getElementById(this.parentId).style.width=parseInt(document.getElementById(this.parentId).style.width)+this.width //添加父元素的长度来包含新加的div
var li = document.createElement("li")
li.className ="li1"
li.style.width=this.width
li.innerHTML =title
li.onclick  = function(){change(li)}
document.getElementById("ul").appendChild(li)

var div = document.createElement("div")
div.className ="div2"
div.innerHTML =content
document.getElementById("div").appendChild(div)
}

Tab.prototype.change =function(e){
var ul  = document.getElementById("ul")
var div = document.getElementById("div")
for(var i=0;i<ul.getElementsByTagName("li").length;i++)
  {
  if(ul.getElementsByTagName("li")[i]==e)
      {
      ul.getElementsByTagName("li")[i].className="li2"
      div.getElementsByTagName("div")[i].className="div1"
      }
     else
      {
      ul.getElementsByTagName("li")[i].className="li1"
      div.getElementsByTagName("div")[i].className="div2"
      }
   }
}

function change(e){
var ul  = document.getElementById("ul")       //没什么好说的
var div = document.getElementById("div")
for(var i=0;i<ul.getElementsByTagName("li").length;i++)
  {
  if(ul.getElementsByTagName("li")[i]==e)
      {
      ul.getElementsByTagName("li")[i].className="li2"
      div.getElementsByTagName("div")[i].className="div1"
      }
     else
      {
      ul.getElementsByTagName("li")[i].className="li1"
      div.getElementsByTagName("div")[i].className="div2"
      }
 }
}

function jia(a,b){
oo.add(a,b)}

var oo = new Tab("all",116)
oo.createTab(3,[1,2,3],[1,2,3])
</script>