推荐三种简洁的Tab导航（网页选项卡）简析
Tab导航（网页选项卡）是一种常见的网页交互元素，能够帮助用户快速浏览和选择相关信息。在网页中应用选项卡可以使网页显得更紧凑，结合AJAX技术可以使页面在有限的空间内展现更多的内容。本文主要介绍几种简洁的选项卡效果的实现，不涉及滑动门和AJAX。
一、通过更换显示样式实现的Tab导航
这种方式非常常见，就是通过更换显示样式实现选项卡的切换效果。HTML代码如下：
```html
<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>
```
JavaScript代码如下：
```javascript
function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li");
var mli=document.getElementById("main"+m).getElementsByTagName("ul");
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";
mli[i].style.display=i==n?"block":"none";
}
}
```
这种方式非常简单易懂，适合初学者使用。
二、使用相对层实现的Tab导航
这种方式比较复杂一些，外面加一个相对层，设置溢出隐藏，将选项卡设为绝对定位，设置层指针为1，以便可以遮住下主区块的上边框。设置主区块的边框为1px的黑边，上空白为-1px，使上边框伸到选项卡下。当改变选项卡某项的背景为白色时便可遮住一部分主区块的上边框。这样效果就实现了。HTML代码如下：
```html
<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>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
```
这种方式需要了解CSS的相对层和绝对定位的知识。
三、使用背景层实现的Tab导航
这种方式也是一种不常用的方式，加一个相对层，利用一个背景层定位，通过改变层的左距离实现效果。HTML代码如下：
```html
<div id="tabs2">
<div class="menu2box">
<div id="tip2"></div>
<ul id="menu2">
<li class="hover" onmouseover="nowtab(2,0)"><a href="#">新闻</a></li>
<li onmouseover="nowtab(2,1)"><a href="#">评论</a></li>
<li onmouseover="nowtab(2,2)"><a href="#">技术</a></li>
<li onmouseover="nowtab(2,3)"><a href="#">点评</a></li>
</ul>
</div>
<div class="main2box">
<div class="main" id="main2">
<ul class="block"><li>新闻列表</li></ul>
<ul><li>评论列表</li></ul>
<ul><li>技术列表</li></ul>
<ul><li>点评列表</li></ul>
</div>
</div>
</div>
```
这种方式需要了解CSS的背景层和定位的知识。
这三种方式都可以实现Tab导航的效果，但是在实际应用中需要根据具体情况选择合适的方式。
