先放个图片，我改下代码。
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.以下为动态创建：
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]代码说明 1.我的CSS分割为2段了，第一段为此演视用，可自己定制，第二段为此框架必须。 2.script我也分割为2段，第一段为必须，第二段为客户定制的，我这里的代码是给一个实现参考。 3.以下的HTML代码为参考实现的必须容器代码 复制代码 代码如下:<ul id="itemsPanel"> </ul> <div id="cardContent"> <iframe id="cardFrame"> </iframe> </div> 使用介绍: 1.ItemsPanel对象 构造方法：new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame"). 接受的2个参数，第一个为ul容器ID，第二个为我们需要展现标签对应的内容的irame的ID 。 ItemPanel对象使用addItem方法添加Item。 如果你需要创建多个ItemsPanel，可以自己参考我的范例来进行。 2.Item对象 构造方法：new Asgard.CardProgram.Item("index","时空创意","http://www.skst.com.cn",true)接受4个参数 第一个为打算创建的选项卡的id，第二个为打算创建的选项卡的标题，第三个为此选项卡对应的URL，第四个为是否为首页，因为我们也许会打算创建一个默认页面不允许关闭。当然如果你全部设置为true，那么也就是正常的选项卡效果了。
推荐阅读
从阿里妈妈发现的几个不错的表单验证函数
//-------- // 检查当前浏览器是否为Netscape //-------- function isNetscape(){ app=navigator.appName.substring(0,1); if (app=='N') return true; else {return false;} } //-------- // 保存当前>>>详细阅读
本文标题：发一个比较漂亮的选项卡动态增删的效果
地址：http://www.17bianji.com/kaifa2/JS/30055.html
1/2 1
网友点评
精彩导读
科技快报
品牌展示