较好的视觉效果的网页选项卡

　2010-09-14 13:39:21　来源：WEB开发网　　　

核心提示：“选项卡”经常会被混同为“滑动门”，滑动门只是一种背景自适应内容的实现方法，较好的视觉效果的网页选项卡，不只可以应用在导航菜单，一样也可以应用在其他地方，跳转到所有[群组]列表"><span>群组</span></a>&

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>选项卡</title> <style type="text/css">  </style> <script type="text/javascript" language="javascript">  </script> </head> <body> <div class="tabList" id="tabList1"> <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="http://www.webjx.com/security/basexsrm-9739.html" title="手工杀毒的一些心得！">手工杀毒的一些心得！</a></dt> <dd class="name"><a href="#11" title="">QUESTER</a></dd> <dd>2009-01-10</dd> <dt><a href="/2" title="日志标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt> <dd class="name"><a href="#11" title="作者：snl">snl</a></dd> <dd>2009-01-10</dd> <dt><a href="/3" title="日志标题：网站内容结构化探讨">网站内容结构化探讨</a></dt> <dd class="name"><a href="#11" title="作者：豆猫">豆猫</a></dd> <dd>2009-01-10</dd> <dt><a href="http://www.webjx.com/photoshop/psmouse-9733.html" title="Photoshop制作一张旧的黑桃A扑克牌">Photoshop制作一张旧的黑桃A扑克牌</a></dt> <dd class="name"><a href="#11" title="作者：greengnn">greengnn</a></dd> <dd>2009-01-10</dd> <dt><a href="http://www.webjx.com/photoshop/" title="日志标题：Photoshop CS3教程">Photoshop CS3教程</a></dt> <dd class="name"><a href="#11" title="作者：amethyst01">amethyst01</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=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img1" title="查看相册内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img1" title="查看相册内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img1" title="查看相册内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221542.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=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img2" title="查看内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img2" title="查看内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img2" title="查看内容"><img src=http://tech.ddvip.com/2009-02/"http://www.webjx.com/files/090217/1_221548.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> <dt><a href="/2" title="标题：Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt> <dd class="name"><a href="#11" title="群组：手绘爱好者">手绘爱好者</a></dd> <dd>2009-01-10</dd> <dt><a href="/3" title="标题：网站内容结构化探讨">网站内容结构化探讨</a></dt> <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd> <dd>2009-01-10</dd> <dt><a href="/4" title="标题：CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt> <dd class="name"><a href="#11" title="群组：WEB标准化">WEB标准化</a></dd> <dd>2009-01-10</dd> <dt><a href="/5" title="标题：某些人眼中的色彩">某些人眼中的色彩</a></dt> <dd class="name"><a href="#11" title="群组：设计视觉">设计视觉</a></dd> <dd>2009-01-10</dd> </dl> </div> </li> </ul> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]