发一个比较漂亮的选项卡动态增删的效果

先放个图片，我改下代码。

163邮箱选项卡效果

ul,li
{
margin:0;
padding:0;
list-style:none;
/*for close location*/
position:relative;
}
li
{
display:block;
width:130px;
height:25px;
float:left;
cursor:pointer;
overflow:hidden;
}
span
{
font-size:10pt;
color:#22b5d9;
font-weight:bold;
display:block;
}
#asgardCard li
{
font-size:10pt;
font-weight:bold;
color:#22b5d9;
border:1px solid #22b5d9;
margin:10px;
text-align:center;
line-height:1.5;
}

/*Asgard CardProgram Css Start*/
#itemsPanel,#itemsPanel li
{
margin:0;
padding:0;
list-style:none;
/*for close location*/
position:relative;
}
/*Clear Float：Referrence-->http://www.blueidea.com/tech/web/2005/3065.asp*/
/*There is defect:the attribute-content hold one line place.*/
ul:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#cardContent
{
height:auto;
min-height:300px;
border:2px solid #cccccc;
clear:both;
}
#itemsPanel li
{
display:block;
width:130px;
height:25px;
float:left;
cursor:pointer;
overflow:hidden;
}
#cardFrame
{
width:100%;height:100%;border:1px solid #ffffff;margin:0;
}
.active
{
background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat;
}
.default
{
background:url('http://www.jb51.net//upload/20070928200415937.jpg') 0 -25px no-repeat;
}
.title
{
font-size:10pt;
font-weight:bold;
line-height:2;
padding-left:10px;
display:block;
width:105px;
height:25px;
}
li .close
{
position:absolute;
top:9px;
left:115px;
display:block;
width:10px;
height:10px;
overflow:hidden;
}
.active .close
{
background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') 0 -50px no-repeat;
}
.default .title
{
color:#999999;
}
.active .title
{
color:#000000;
}
.active .close:hover
{
background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -10px -50px no-repeat;
}
.default .close
{
background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -20px -50px no-repeat;
}
.default .close:hover
{
background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg') -30px -50px no-repeat;
}
/*Asgard CardProgram Css End*/

1.代码效果示例：

• Kiss
• Andy

注：以上代码为DOM动态组织的代码参考

2.点击下表，更换内容

• 蓝色理想
• Google中国
• Email-126
• 艾泽拉斯

3.以下为动态创建：

/*
* Field Declare ^-^
*/
var Asgard;
if(!Asgard)
Asgard={};
if(!Asgard.CardProgram)
Asgard.CardProgram={};
/*
*function:define Object ItemsPanel
*/
Asgard.CardProgram.ItemsPanel=function(id,frameId)
{
this.element=$(id);
this.register=new Array();
this.currentItem=null;
this.cardFrame=$(frameId);
this.element.className='itemsPanel';
}
/*
*function:add item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.addItem=function(item)
{
if(this.validateExist(item.element.getAttribute('id')))
return;
item.panel=this;
this.visitedRegister(item,"add");
this.element.appendChild(item.element);
}
/*
*function:delete item from panel
*/
Asgard.CardProgram.ItemsPanel.prototype.deleteItem=function(item)
{
this.visitedRegister(item,"delete");
this.element.removeChild(item.element);
}
/*
*Ajax or other
*/
Asgard.CardProgram.ItemsPanel.prototype.changeSubPage=function()
{
if(this.register.length==0)
{
this.cardFrame.src="";
return;
}

this.cardFrame.src=this.currentItem.url;
/*
*这里用户可以自己定义想要的页面，如果你想内嵌IFrame。
*/
}
Asgard.CardProgram.ItemsPanel.prototype.validateExist=function(id)
{
for(var i=0;i0)
{
this.currentItem=this.register[i-1];
this.currentItem.element.className="active";
}
else
this.currentItem=null;
}

this.changeSubPage();
}
else if(type=="active")
{
if(this.currentItem==item)
return;
else
{
for(k=0;k"+this.title+""+"";
this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});
this.addEventListener(this.$ES(this.element,'a')[0],'click',function(){mirror.destroyItem();});
}
else
{
this.element.innerHTML=""+this.title+"";
this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});
}