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

2016-02-19 09:08 8 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，那么也就是正常的选项卡效果了。

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

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

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

网页选项卡设计宽度的猜想

标签：平面设计海报设计广告设计画报设计签名设计服装设计名片设计画册设计版式设计商标设计

从网页选项卡诞生的那一天起，凭借其紧凑的布局和方便的切换方式，就成为各大门户必用的设计元素。让我们来看看这些五花八门的选项卡吧规则的宽度–比如150px、300px合适的选项卡数量：2个、4个使这些选项卡都恰好能平分宽度，在各大浏览器中完美呈现。忽然有一天，当你的网站需要移植到iPhone，或是其他移动设备上，你得在一个...

PowerPoint怎样重设选项卡的名称

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

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

标签：浏览器

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

用htc组件制作windows选项卡

标签： Web开发

在网页中模拟制作windows风格选项卡的方法可以有很多种，这里向大家介绍一个比较简单的方法——用htc组件制作。使用htc的好处是可以自由调用，有点批处理的感觉，例如你有很多网页都要用到这个选项卡，那么你只要做一个htc就可以了，然后在不同的网页中分别调用，而不必重复制作。使用起来很方便，可以节约很多时间。 &n...

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

标签： windows

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

查看更多精彩>>