分析比较：三种简洁的Tab导航简析

日期：2007年8月23日作者：查看:[大字体中字体小字体]

在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现（不涉及滑动门和AJAX），附有实例，无图片，兼容性较好，方便大家直接使用。

第一种形式: 通过更换显示样式实现，这种很常见，就不多说了。

<div id="tabs0">
<ul class="menu0" id="menu0">
<li onclick="setTab(0,0)" class="hover">新闻</li>
<li onclick="setTab(0,1)">评论</li>
<li onclick="setTab(0,2)">技术</li>
<li onclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>

第二种形式: 这种结构比较复杂一些，外面加一个相对层(.menu1box)，设置溢出隐藏，将选项卡(#menu1)设为绝对定位，设置层指针为1(z-index:1;)，以便可以遮住下主区块(.main1box)1px的高度。设置主区块的边框为1px的黑边，上空白(margin-top)为-1px，使上边框伸到选项卡下。当改变选项卡某项(li)的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。

<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
   <li class="hover" onmouseover="setTab(1,0)"><a href="#">新闻</a></li>
   <li onmouseover="setTab(1,1)"><a href="#">评论</a></li>
   <li onmouseover="setTab(1,2)"><a href="#">技术</a></li>
   <li onmouseover="setTab(1,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
   <ul class="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
[1] [2] [3] 下一页
分析比较：三种简洁的Tab导航简析相关文章：
·危机重重 2007年度网络安全分析报告
·诊断和分析提高搜索引擎网站排名
·简单分析2007年11月十大网络安全漏洞
·简单分析Script脚本跨站攻击漏洞技术
·深入分析Windows操作系统死机问题
·用AutoCAD五分钟内完成三维足球建模
·详细分析操作系统死机的问题
·分析Windows操作系统死机问题
·分析解决显卡常见故障
·多方面分析选择商业网站的域名
分析比较：三种简洁的Tab导航简析相关软件
·《细胞分裂：双重间谍》简体中文教学版试玩
·SK魔兽录像分析器 V1.4 Beta 3
·《蜘蛛侠：敌友难分》火爆试玩
·复旦往事--半世纪中国知识分子生活
·《股票常识与技术分析》
·大败笔:34个最新的营销失败案例分析
·世界劫难印度洋海啸（部分图片）
·分手后霪乱
·短信合集一(5000多条分类短信)
·周六艾那姆的分享课

上一篇:CSS实现的网页中文字排版的几种方式

下一篇:Photoshop为数码照片制作精美签名

特别声明：本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作
者.文章版权归文章原始作者所有.对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转
载的文章有版权问题请联系编辑人员,我们尽快予以更正. 转载请注明来源：http://www.hackhome.com

分析比较：三种简洁的Tab导航简析

精品推荐

热点TOP10

特别推荐