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

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

<html> <head>     <title>163邮箱选项卡效果</title><style>         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;         }     </style><style>         /*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('https://www.0133.cn//upload/20070928200415937.jpg-600') 0 0 no-repeat;         }                 .default         {             background:url('https://www.0133.cn//upload/20070928200415937.jpg-600') 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-600') 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-600') -10px -50px no-repeat;         }         .default .close         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg-600') -20px -50px no-repeat;         }         .default .close:hover         {             background:url('http://bbs.blueidea.com/attachments/2007/8/20/20070820_b3321ab700a7e293b3ceJODnkLUsGEhy.jpg-600') -30px -50px no-repeat;         }         /*Asgard CardProgram Css End*/     </style></head><body> <span>1.代码效果示例：</span><ul>         <li class="active">         <nobr class="title">Kiss</nobr><a href="#nogo" class="close" title="关闭"></a></li><li class="default">         <nobr class="title">Andy</nobr><a href="#nogo" class="close" title="关闭"></a></li></ul><p/><span>注：以上代码为DOM动态组织的代码参考<span> <p style="clear:both;"/><p/><span>2.点击下表，更换内容</span><ul id="asgardCard"> <li title="blueidea">蓝色理想</li><li title="google">Google中国</li><li title="email126">Email-126</li><li title="ngacn">艾泽拉斯</li></ul><p style="clear:both;"/><span>3.以下为动态创建：</span><div>     <ul id="itemsPanel">     </ul><div id="cardContent">     <iframe id="cardFrame">     </iframe></div></div></body></html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

代码说明
1.我的CSS分割为2段了，第一段为此演视用，可自己定制，第二段为此框架必须。
2.script我也分割为2段，第一段为必须，第二段为客户定制的，我这里的代码是给一个实现参考。
3.以下的HTML代码为参考实现的必须容器代码

复制代码代码如下:

使用介绍:
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，那么也就是正常的选项卡效果了。

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

相关文章

前端开发

置顶推荐

猜你喜欢