发一个比较漂亮的选项卡动态增删的效果_导航菜单

来源：懂式情感网

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

<html> 
<head> 
 <title>163邮箱选项卡效果</title> 
  
 </ 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('http://www.gxlcms.com//upload/20070928200415937.jpg') 0 0 no-repeat; 
 } 
 .default 
 { 
 background:url('http://www.gxlcms.com//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.代码效果示例： 
 
 <li class="active"> 
 <nobr class="title">Kiss</nobr> 
 
 </li> 
 <li class="default"> 
 <nobr class="title">Andy</nobr> 
 
 </li> 
 
<p /> 
注：以上代码为DOM动态组织的代码参考 
<p style="clear:both;"/> 
<p /> 
2.点击下表，更换内容 
 
<li title="blueidea">蓝色理想</li> 
<li title="google">Google中国</li> 
<li title="email126">Email-126</li> 
<li title="ngacn">艾泽拉斯</li> 
 
<p style="clear:both;"/> 
3.以下为动态创建： 
 
 
 
 
 
 
 
 
</body> 
 
/* 
* 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+"</nobr>"+""; 
 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+"</nobr>"; 
 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> 
 
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","脚本之家","http://www.gxlcms.com",false)); 
 } 
} 
var itemsPanel=null; 
function exampleStartMethod() 
{ 
 attachExampleEvent(); 
 if(itemsPanel==null) 
 itemsPanel=new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame"); 
 itemsPanel.addItem(new Asgard.CardProgram.Item("index","脚本之家","http://www.gxlcms.com",true)); 
} 
window.onload=exampleStartMethod; 
</ script> 
</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，那么也就是正常的选项卡效果了。

显示全文

全部频道

发一个比较漂亮的选项卡动态增删的效果_导航菜单