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

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

<html> 
<head> 
    <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('http://www.phpstudy.net//upload/20070928200415937.jpg') 0 0 no-repeat; 
        }         
        .default 
        { 
            background:url('http://www.phpstudy.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> 
<span>1.代码效果示例：</span> 
<ul>     
    <li class="active"> 
        <nobr class="title">Kiss</nobr> 
        如需引入外部Js需刷新才能执行]</div><BR>代码说明 <BR>1.我的CSS分割为2段了，第一段为此演视用，可自己定制，第二段为此框架必须。 <BR>2.script我也分割为2段，第一段为必须，第二段为客户定制的，我这里的代码是给一个实现参考。 <BR>3.以下的HTML代码为参考实现的必须容器代码 <BR><div class="codetitle"><span style="CURSOR: pointer"  onclick="doCopy('code41025')"><U>复制代码</U></span> 代码如下:</div><div class="codebody" id="code41025"><BR><ul id="itemsPanel"> <BR></ul> <BR><div id="cardContent"> <BR>    <iframe id="cardFrame"> <BR>    </iframe> <BR></div><BR></div> <BR>使用介绍: <BR>1.ItemsPanel对象 <BR>   构造方法：new Asgard.CardProgram.ItemsPanel("itemsPanel","cardFrame"). <BR>   接受的2个参数，第一个为ul容器ID，第二个为我们需要展现标签对应的内容的irame的ID 。 <BR>   ItemPanel对象使用addItem方法添加Item。 <BR>   如果你需要创建多个ItemsPanel，可以自己参考我的范例来进行。 <BR>2.Item对象 <BR>   构造方法：new Asgard.CardProgram.Item("index","时空创意","http://www.skst.com.cn",true)接受4个参数 <BR>   第一个为打算创建的选项卡的id，第二个为打算创建的选项卡的标题，第三个为此选项卡对应的URL，第四个为是否为首页，因为我们也许会打算创建一个默认页面不允许关闭。当然如果你全部设置为true，那么也就是正常的选项卡效果了。 <br><br>

<hr>

</div>
			</div>

</div>
       
      <div class="col-md-4">
	
	
	<div class="panel panel-default">
		
		<div class="panel-heading"> <a href="/php/">PHP教程</a></div>
		<div class="list-group">
<a href="/php/1.html" class="list-group-item">PHP简介</a>
<a href="/php/8.html" class="list-group-item">PHP基本语法</a>
<a href="/php/12.html" class="list-group-item">PHP类型</a>
<a href="/php/24.html" class="list-group-item">PHP变量</a>
<a href="/php/34.html" class="list-group-item">PHP运算符</a>
<a href="/php/47.html" class="list-group-item">PHP控制结构</a>
<a href="/php/67.html" class="list-group-item">PHP函数</a>
<a href="/php/74.html" class="list-group-item">PHP类与对象</a>
<a href="/php/110.html" class="list-group-item">PHP异常处理</a>
<a href="/php/function.php" class="list-group-item">函数库分类</a>
						     
				
						
					</div>
					
	</div>
				
</div>

</div>

<div class="panel panel-default">
        <div class="panel-heading">快速导航</div>
        <div class="panel-body">
                       <a href="/list.php?id=1">PHP</a>
<a href="/list.php?id=2">MySQL</a>
<a href="/list.php?id=3">HTML</a>
<a href="/list.php?id=4">CSS</a>
<a href="/list.php?id=5">JavaScript</a>
<a href="/list.php?id=6">MSSQL</a>
<a href="/list.php?id=10">AJAX</a>

<a href="/list.php?id=14">Linux</a>
<a href="/list.php?id=17">Mac</a>
<a href="/list.php?id=7">ASP</a>
<a href="/list.php?id=11">服务器</a>

<a href="/list.php?id=15">SQL</a>
<a href="/list.php?id=16">jQuery</a>

<a href="/list.php?id=18">C#</a>
<a href="/list.php?id=19">C++</a>
<a href="/list.php?id=20">java</a>
<a href="/list.php?id=21">Android</a>
<a href="/list.php?id=22">IOS</a>
<a href="/list.php?id=23">oracle</a>
<a href="/list.php?id=24">MongoDB</a>

<a href="/list.php?id=26">SQLite</a>
<a href="http://wamp.phpstudy.net/">wamp</a>
<a href="/jiaotong/">交通频道</a>   
	<span style="display:none">

</span>
                    </div>
    </div>

<hr>

</div>

<div class="bottom">
	
	<div class="container">
   Copyright © 2016 phpStudy  | 豫ICP备2021030365号-3<script src="/images/foot.js?1"></script>
    </div>
</div>
<script src="/js/foot2.js"></script>
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

</body>
</html>