网络编程
位置:首页>> 网络编程>> 网页设计>> [CSS+JS]同一页面可以重复使用的选项卡

[CSS+JS]同一页面可以重复使用的选项卡

作者:豆豆猫 来源:豆豆猫的窝 发布时间:2009-02-12 12:53:00 

标签:Ajax,JavaScript,滑动门,选项卡

“选项卡”经常会被混同为“滑动门”,滑动门只是一种背景自适应内容的实现方法,不只可以应用在导航菜单,一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。

“选项卡”一般和JavaScirpt及Ajax结合使用,以达到节约版面、无刷新页面更新信息、以及一些比较好的视觉效果。一般的选项卡都需要JavaScript程序来配合,完成切换的效果。


——>> 实例文件 <<——

例如有设计图如图1所示。


选项卡设计图

在CSS 2规范中,伪类“:hover”(鼠标指向状态)可以应用在任何元素上,因此可以利用此伪类完成鼠标指向选项卡时的显示,但是当鼠标移开,显示效果会消失,因此还需要JavaScirpt配合实现选项卡状态及内容的显示和隐藏。

其结构化代码如下:


<div class="tabList">  <ul class="tabBox">    <li class="tabOption tabOn"><h4><a href="/blog/" title="单击,跳转到所有[日志]列表"><span>日志</span></a></h4>      <div class="tabContentBox">      <dl class="tabContent  blog">        <dt><a href="/1" title="日志标题:优秀广告设计,不服不行!">优秀广告设计,不服不行!</a></dt>        <dd class="name"><a href="#11" title="作者:QUESTER">QUESTER</a></dd>        <dd>2009-01-10</dd>        ……      </dl>      </div>    </li>    <li class="tabOption"><h4><a href="/album/" title="单击,跳转到所有[相册]列表"><span>相册</span></a></h4>      <div class="tabContentBox">      <ul class="tabContent  album">        <li><a href="/img1" title="查看相册内容"><img src="img/cover.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>        ……      </ul>      </div>    </li>    <li class="tabOption"><h4><a href="/share/" title="单击,跳转到所有[分享]列表"><span>分享</span></a></h4>      <div class="tabContentBox">      <ul class="tabContent  share">        <li><a href="/img2" title="查看内容"><img src="img/photo.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li>        ……      </ul>      </div>    </li>    <li class="tabOption"><h4><a href="/group/" title="单击,跳转到所有[群组]列表"><span>群组</span></a></h4>      <div class="tabContentBox">      <dl class="tabContent  group">        <dt><a href="/1" title="标题:优秀广告设计,不服不行!">优秀广告设计,不服不行!</a></dt>        <dd class="name"><a href="#11" title="群组:设计视觉">设计视觉</a></dd>        <dd>2009-01-10</dd>        ……      </dl>      </div>    </li>  </ul></div>

其基本的结构如下:


<div class="tabList" id="tabList1">  <ul class="tabBox">    <li class="tabOption  tabOn">      <h4><a href=""><span>选项1</span></a></h4>      <div class="tabContentBox">        选项卡的具体内容      </div>    </li>    <li class="tabOption">      <h4><a href=""><span>选项2</span></a></h4>      <div class="tabContentBox">        选项卡的具体内容      </div>    <li>    ……  </ul></div>

0
投稿

猜你喜欢

  • 内容摘要:我们在浏览一些文章的时候,当鼠标选中一些文字的时候,就出现了一些隐藏的字符,平常是看不到的。这些干扰码一般有两种,一是随机无意义的
  • 来自某个nb招聘的题目:请给Array本地对象增加一个原型方法,它的用途是删除数组条目中重复的条目(可能有多个),返回值是一个包含被删除的重
  • YSlow是yahoo美国开发的一个页面评分插件,非常的棒,从中我们可以看出我们页面上的很多不足,并且可以知道我们改怎么却改进和优化。仔细研
  • 最近做的一个B/S项目,在打印时采用了在IE中嵌入.net winform控件和XML结合的方式(参见http://www.yesky.co
  • 我开发过几个采集程序,也研究过很多采集程序代码,所以对采集程序的原理还算是稍微有些了解。先说一下采集原理:采集程序的主要步骤如下: 一、获取
  • 有时候我们需要判断某一个IP地址是否属于一个网段,以决定该用户能否访问系统.比如用户登录的IP是218.6.7.7,而我们的程序必须判断他是
  • 如何显示SQL数据库所有表的名称?<%strSQLDSN = "xxxx"strSQLUser
  • 今天看看那些知名的Logo,可能你没注意过,它们也是一直在变化,有的还挺雷人的!先从时尚的苹果开始吧,苹果也有土的时候。1976年那第一个L
  • 删除单条记录 代码如下:id = saferequest("id") sql="
  • 这个验证类的完成有很长时间了,一直没有分享给大家使用了这么长时间之后感觉挺顺手,用于一些不需要特殊效果的表单验证个人认为已经足够了,还是挺好
  • 这里其实并不需要其它的什么函数来支持,只需要使用MYSQL提供的一些SQL语句就可以了。这里为了简单起见,以MYSQL的系统表USER为例,
  • 在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div style="clear:both;">
  • 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图
  • 上一篇介绍了 HTML5 中 Canvas 的路径,这篇将要介绍一下 Canvas&nbs
  • 要读懂这些代码主要是要了解ASP中操作二进制数据的对象ADODB.Stream!本程序主要用的就是Adodb.Stream,如果你有这个基础
  • 一、目的之前在博文SQL Server数据库最小宕机迁移方案中提到了使用了完全备份+差异备份的功能完成了数据库的转移,但是这个方法在遇到了7
  • 本文的目的是探讨JS相关技术,并不是以杀毒为主要目的,杀毒只是为讲解一些JS做铺垫的,呵呵,文章有点长,倒杯咖啡或者清茶慢慢看,学习切勿急躁
  • 删除备份和还原历史记录表中所有早于 oldest_date 的备份集的项目。由于执行备份或还原操作时会在备份和还原历史记录表中添加行,sp_
  • 代码如下所示:表landundertake结构如下所示:表appraiser结构如下所示:access代码:代码如下:TRANSFORM F
  • 从MySQL 5.0 开始,支持了一个全新的SQL句法:PREPARE stmt_name FROM preparable_stmt;EXE
手机版 网络编程 asp之家 www.aspxhome.com