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

2023-02-02 原文

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

<title>163邮箱选项卡效果</title>
<script>     </script><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>
<span>1.代码效果示例：</span> <ul>
<li class="active">         <nobr class="title">Kiss</nobr>
</li>     <li class="default">         <nobr class="title">Andy</nobr>
</li>     </ul>
<p></p> <span>注：以上代码为DOM动态组织的代码参考<span> <p style="clear:both;"></p> <p></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;"></p> <span>3.以下为动态创建：</span> <div>     <ul id="itemsPanel"></ul>
<div id="cardContent">     <iframe id="cardFrame">     </iframe>     </div> </div>  <script> /* * 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;i<this.register.length;i  )     {         if(this.register[i].element.id==id)         {             return true;         }     }         return false; } /* *function:register visited sequence *         type--add | delete | active */ Asgard.CardProgram.ItemsPanel.prototype.visitedRegister=function(item,type) {     var i=this.register.length;     if(type=="add")     {                 for(var k=0;k<i;k  )         {             this.register[k].resetItem();         }         this.currentItem=item;         this.register[i]=item;         this.currentItem.element.className="active";                  this.changeSubPage();     }     else if(type=="delete")     {                             for(k=0;k<i;k  )         {             if(this.register[k]==item)             {                 this.register.splice(k,1);                 break;             }         }         if(item==this.currentItem)         {             i=this.register.length;             if(i>0)             {                 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<i;k  )             {                 if(this.register[k]==item)                 {                     this.register.splice(k,1);                     break;                 }             }                          i=this.register.length;             for(k=0;k<i;k  )             {                 this.register[k].resetItem();             }             this.currentItem=item;             this.register.push(item);         }                  this.changeSubPage();     } } /* *function:define Object Item */ Asgard.CardProgram.Item=function(id,title,url,flag) {         this.element=this.$C();     this.panel={};     this.id=id;     this.title=title;     this.url=url;     this.flag=flag;     this.init(); }; /* *function:init item */ Asgard.CardProgram.Item.prototype.init=function() {     this.element.setAttribute('id',this.id);     this.element.className="default";                  var mirror=this;     if(!this.flag)     {                 this.element.innerHTML="<nobr class='title' title='" this.title "'>" 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="<nobr class='title' title='" this.title "'>" this.title "";             this.addEventListener(this.$ES(this.element,'nobr')[0],'click',function(){mirror.activeItem();});     }      } /* *active item */ Asgard.CardProgram.Item.prototype.activeItem=function() {     this.panel.visitedRegister(this,"active");     this.element.className="active";     } /* *function:reset item */ Asgard.CardProgram.Item.prototype.resetItem=function() {     this.element.className="default";     } /* *function:destroy item */ Asgard.CardProgram.Item.prototype.destroyItem=function() {     this.panel.deleteItem(this); } /* *function:addListener to item */ Asgard.CardProgram.Item.prototype.addEventListener=function(element,type,handler) {     if(element.addEventListener)         element.addEventListener(type,handler,true);     else         element.attachEvent("on" type,handler,true); } /* *function:usefull functions */ Asgard.CardProgram.Item.prototype.$C=function(tag) {     if(tag && typeof tag =="string")             return document.createElement(tag);     else         return document.createElement('li'); } Asgard.CardProgram.Item.prototype.$ES=function(element,tag) {     return element.getElementsByTagName(tag); } function $(id) {     return document.getElementById(id); } </script><script> function attachExampleEvent() {     var lists=$('asgardCard').getElementsByTagName('li');     for(var i=0;i<lists.length;i  )     {         lists[i].onclick=exampleClickListener;     } } function exampleClickListener(e) {     e=e || window.event;     var source=e.target || e.srcElement;     if(source.getAttribute('title')=='blueidea')     {             itemsPanel.addItem(new Asgard.CardProgram.Item("blueidea","蓝色理想","http://www.blueidea.com",false));     }     else if(source.getAttribute('title')=='google')     {             itemsPanel.addItem(new Asgard.CardProgram.Item("google","Google中国","http://www.google.cn",false));     }     else if(source.getAttribute('title')=='email126')     {             itemsPanel.addItem(new Asgard.CardProgram.Item("email126","Email-126","http://mail.126.com",false));     }     else if(source.getAttribute('title')=='ngacn')     {             itemsPanel.addItem(new Asgard.CardProgram.Item("ngacn","Devmax","https://www.jb51.net",false));     }     } var itemsPanel=null; function exampleStartMethod() {     attachExampleEvent();     if(itemsPanel==null)         itemsPanel=new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame");     itemsPanel.addItem(new Asgard.CardProgram.Item("index","Devmax","https://www.jb51.net",true));     } window.onload=exampleStartMethod; </script></span></span>

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

随机推荐

js中‘!.’是什么意思
Vue如何指定不编译的文件夹和favicon.ico

这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
基于JavaScript编写一个图片转PDF转换器

本文为大家介绍了一个简单的 JavaScript 项目，可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片，只需点击一下即可将其转换为 PDF 文件，感兴趣的可以动手尝试一下
jquery点赞功能实现代码点个赞吧!

点赞功能很多地方都会出现，如何实现爱心点赞功能，这篇文章主要为大家详细介绍了jquery点赞功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
AngularJs上传前预览图片的实例代码

使用AngularJs进行开发，在项目中，经常会遇到上传图片后，需在一旁预览图片内容，怎么实现这样的功能呢？今天小编给大家分享AugularJs上传前预览图片的实现代码，需要的朋友参考下吧
JavaScript面向对象编程入门教程

这篇文章主要介绍了JavaScript面向对象编程的相关概念，例如类、对象、属性、方法等面向对象的术语，并以实例讲解各种术语的使用，非常好的一篇面向对象入门教程,其它语言也可以参考哦
jQuery中的通配符选择器使用总结

通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下
javascript 动态调整图片尺寸实现代码

在自己的网站上更新文章时一个比较常见的问题是：文章插图太宽，使整个网页都变形了。如果对每个插图都先进行缩放再插入的话，太麻烦了。
jquery ajaxfileupload异步上传插件

这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React学习之受控组件与数据共享实例分析

这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下