[CSS+JS]同一页面可以重复使用的选项卡
作者:豆豆猫 来源:豆豆猫的窝 时间:2009-02-12 12:53:00
“选项卡”经常会被混同为“滑动门”,滑动门只是一种背景自适应内容的实现方法,不只可以应用在导航菜单,一样也可以应用在其他地方。例如选项卡中就可以使用这种技术。
“选项卡”一般和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>