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

2016-02-19 09:08 11 1 收藏

想要天天向上，就要懂得享受学习。图老师为大家推荐发一个比较漂亮的选项卡动态增删的效果，精彩的内容需要你们用心的阅读。还在等什么快点来看看吧！

【 tulaoshi.com - Web开发】

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

<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('http://www.jb51.net//upload/20070928200415937.jpg') 0 0 no-repeat; }   .default { background:url('http://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.代码效果示例： <nobr class="title">Kiss</nobr> <nobr class="title">Andy</nobr>  <p> 注：以上代码为DOM动态组织的代码参考 <p> <p> 2.点击下表，更换内容  蓝色理想 Google中国 Email-126 艾泽拉斯  <p> 3.以下为动态创建： </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，那么也就是正常的选项卡效果了。

来源:http://www.tulaoshi.com/n/20160219/1589697.html

上一篇： [HTML/CSS/Javascript]WWTJS
下一篇：恢复或备份word工作配置环境的方法

看过《发一个比较漂亮的选项卡动态增删的效果》的人还看了以下文章更多>>

PowerPoint怎样重设选项卡的名称

PowerPoint怎样重设选项卡的名称 ①启动PowerPoint2013，鼠标右击选项卡，点击自定义功能区。 ②在右侧主选项卡中右击你要重新定义名称的那一项，选择重命名。 ③弹出一个命名框，输入名称。 ④确定，返回到主界面，可以看到我将开始选项卡改为了Start，大家可以按照此方法完成修改。 PowerPoint快速应...

JQuery Tab选项卡效果代码改进版

标签： Web开发

介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。在这里，我又做了部分的修改，增加了选项卡可自动...

设置tabcontrol控件选项卡的字体为竖着的

Private tabArea As Rectangle Private tabTextArea As RectangleF Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Me.TabControl1.DrawMode = TabDrawMode.O...

ie11无法新建选项卡怎么办？ie11选项卡设置方法

标签： windows

ie11无法新建选项卡怎么办呢?ie11选项卡要怎么设置呢?有朋友在新装win8.1之后，发现ie11无法新建选项卡，这该怎么办呢?下面就和小编一起去了解下ie11选项卡的设置方法吧。有些用户在新装win8.1之后，发现IE无法新建选项卡，只要新建选项卡就出现如图1这样的报错，点取消就会关闭选项卡，点允许就会出现如图2这样的报错，下面就去看...

IE8里如何打开新选项卡时自动切换到新选项卡

标签：浏览器

IE8里如何打开新选项卡时自动切换到新选项卡操作步骤: 在用 Internet Explorer 7 和 Internet Explorer 8 以及更新版本的IE时，我们把一个链接在新选项卡中打开，但总是希望直接切换到新选项卡，而不是停留在当前选项卡。这个怎么操作? 在 IE 里面，点开工具菜单 - 点 Internet 选项。(如果没有出现菜单栏，则按 ALT 键...

查看更多精彩>>