“选项卡”一般和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"> <!-- /* 初始化 */ body { font: 12px/1 "宋体", SimSun, serif; background:#fff; color:#000; } ul, li, dl, dt, dd { margin:0; padding:0; /* 清除浏览器默认的margin和padding值 */ } ul, li { list-style:none outside; /* 清除浏览器中列表项默认的占位 */ } a { text-decoration:none; } img { border:0; } /* 选项卡整体外观定义 */ .tabList { width:400px; height:160px; overflow:hidden; } .tabList .tabBox { height:100%; position:relative; background:#09c; } .tabList .tabBox li { float:left; width:25%; text-align:center; } .tabList h4 { margin:0; height:26px; font-size:1em; line-height:22px; } .tabList h4 a { color:#039; font-weight:normal; display:block; background:#bfeafd url(http://www.webjx.com/files/090217/1_222040.png) no-repeat; padding-left:5px; } .tabList h4 a span { display:block; background:url(http://www.webjx.com/files/090217/1_222040.png) no-repeat top right; padding-right:5px; } .tabList h4 a:hover, .tabList .tabOn h4 a{ background-position:0 -50px; } .tabList h4 a:hover span, .tabList .tabOn h4 a span { background-position:right -50px; } .tabList .tabContentBox li{ width:auto; margin-top:0; } .tabList .tabContentBox { width:390px; height:130px; border:1px solid #069; text-align:left; overflow:hidden; background:#fff; position:absolute; top:22px; left:0; display:none; margin:4px; } .tabList li:hover .tabContentBox, .tabList .tabOn .tabContentBox { display:block; } /* 以下是对各项内容的CSS定义 */ .tabList .tabContentBox .blog, .tabList .tabContentBox .group { color:#999; line-height:2em; margin:5px; } .tabList .tabContentBox .blog dt, .tabList .tabContentBox .group dt, .tabList .tabContentBox .blog dd, .tabList .tabContentBox .group dd{ float:left; border-bottom: 1px dotted #9cf; } .tabList .tabContentBox .blog dt, .tabList .tabContentBox .group dt { width:60%; white-space:nowrap; overflow:hidden; clear:left; font-size:1.1em; } .tabList .tabContentBox .blog dt a, .tabList .tabContentBox .group dt a { color:#039; display:block; margin-left:5px; padding-left:12px; background: url(http://www.webjx.com/files/090217/1_222128.png) no-repeat 5px 11px; } .tabList .tabContentBox .blog dt a:hover, .tabList .tabContentBox .group dt a:hover { color:#f90; background-position:5px -19px; } .tabList .tabContentBox .blog dd, .tabList .tabContentBox .group dd { color:#0cf; width:20%; float:left; white-space:nowrap; overflow:hidden; } .tabList .tabContentBox .blog dd a, .tabList .tabContentBox .group dd a { color:#069; } .tabList .tabContentBox .blog dd a:hover, .tabList .tabContentBox .group dd a:hover { color:#f90; } .tabList .tabContentBox .album li, .tabList .tabContentBox .share li{ width:24.9%; float:left; padding-top:15px; text-align:center; } --> </style> <script type="text/javascript" language="javascript"> <!-- window.onload = tabEffect; function tabEffect() { var allElements = document.getElementsByTagName('*'); for (var i=0; i<allElements.length; i++) { if (allElements[i].className.indexOf('tabOption') >= 0) { allElements[i].onmouseover = mouseOver; } } } function mouseOver() { tabList = this.parentNode; tabOptions = tabList.getElementsByTagName("li"); for (var i=0; i<tabOptions.length; i++) { if (tabOptions[i].className.indexOf('tabOption') >= 0) { tabOptions[i].className = "tabOption"; } } this.className += " tabOn"; } --> </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://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img1" title="查看相册内容"><img src="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://www.webjx.com/files/090217/1_221542.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img1" title="查看相册内容"><img src="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://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img2" title="查看内容"><img src="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://www.webjx.com/files/090217/1_221548.jpg" width="80" height="100" alt="封面" title="相册的标题" /></a></li> <li><a href="/img2" title="查看内容"><img src="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 全部选择 提示：你可先修改部分代码，再按运行]
相关较好的视觉效果的网页选项卡