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

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

<html> <head>     <title>163邮箱选项卡效果</title>   <sty1e>  ul,li  {      margin:0;      padding:0;      list-style:none;            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>   <sty1e>    #itemsPanel,#itemsPanel li  {      margin:0;      padding:0;      list-style:none;            position:relative;      }      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;  }       </style> </head> <body> 1.代码效果示例： <ul>  <li class="active">  <nobr class="title">Kiss</nobr></li>     <li class="default">  <nobr class="title">Andy</nobr></li>     </ul> <p /> 注：以上代码为DOM动态组织的代码参考 <p style="clear:both;"/> <p /> 2.点击下表，更换内容 <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;"/> 3.以下为动态创建：      <ul id="itemsPanel">     </ul>   <iframe id="cardframe">     </iframe></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，那么也就是正常的选项卡效果了。

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

JavaScript相关栏目本月热门文章