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

(编辑：jimmy 日期: 2025/5/11 浏览：3 次 )

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

<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.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat;         }                 .default         {             background:url('https://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*/     </style> </head> <body> 1.代码效果示例： <ul>         <li>         <nobr class="title">Kiss</nobr>              </li>     <li>         <nobr class="title">Andy</nobr>              </li>     </ul> <p> 注：以上代码为DOM动态组织的代码参考 <p> <p> 2.点击下表，更换内容 <ul id="asgardCard"> <li>蓝色理想</li> <li>Google中国</li> <li>Email-126</li> <li>艾泽拉斯</li> </ul> <p> 3.以下为动态创建：      <ul id="itemsPanel">     </ul>                 </body>   </html>

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

上一篇：带缓冲的收缩与展开内容效果
下一篇：JS创建优美的页面滑动块效果 - Glider.js