三种简洁的Tab导航（网页选项卡）…

来源：互联网发布：仿万家购物返利网源码编辑：程序博客网时间：2024/04/27 13:27

第一种形式:通过更换显示样式实现，这种很常见，就不多说了。复制内容到剪贴板代码:以下是引用片段：
<div id="tabs0">
<ul class="menu0" id="menu0">
   <lionclick="setTab(0,0)"class="hover">新闻</li>
   <lionclick="setTab(0,1)">评论</li>
   <lionclick="setTab(0,2)">技术</li>
   <lionclick="setTab(0,3)">点评</li>
</ul>
<div class="main" id="main0">
   <ulclass="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">
   <ulid="menu1">
   <li class="hover"onmouseover="setTab(1,0)"><ahref="#">新闻</a></li>
   <lionmouseover="setTab(1,1)"><ahref="#">评论</a></li>
   <lionmouseover="setTab(1,2)"><ahref="#">技术</a></li>
   <lionmouseover="setTab(1,3)"><ahref="#">点评</a></li>
  </ul>
</div>
<div class="main1box">
   <divclass="main" id="main1">
   <ulclass="block"><li>新闻列表</li></ul>
   <ul><li>评论列表</li></ul>
   <ul><li>技术列表</li></ul>
   <ul><li>点评列表</li></ul>
  </div>
</div>
</div>

第一、二种形式的JS代码:

代码: 以下是引用片段：
function setTab(m,n){
vartli=document.getElementByIdx("menu"+m).getElementsByTagName_r("li");*获取选项卡的LI对象*/
varmli=document.getElementByIdx("main"+m).getElementsByTagName_r("ul");*获取主显示区域对象*/
for(i=0;i<tli.length;i++){
tli[i].className=i==n?"hover":"";*更改选项卡的LI对象的样式，如果是选定的项则使用.hover样式*/
mli[i].style.display=i==n?"block":"none";*确定主区域显示哪一个对象*/
}
}

第三种形式:这也是一种不常用的方式，加一个相对层(.menu2box)，利用一个背景层(#tip2)定位，通过改变层的左距离(left)实现效果。

复制内容到剪贴板代码:以下是引用片段：
<div id="tabs2">
<div class="menu2box">
   <divid="tip2"></div>
   <ulid="menu2">
   <li class="hover"onmouseover="nowtab(2,0)"><ahref="#">新闻</a></li>
   <lionmouseover="nowtab(2,1)"><ahref="#">评论</a></li>
   <lionmouseover="nowtab(2,2)"><ahref="#">技术</a></li>
   <lionmouseover="nowtab(2,3)"><ahref="#">点评</a></li>
  </ul>
</div>
   <divclass="main" id="main2">
新闻内容
</div>
</div>

以下是HTML网页特效代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//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>简洁Tab</title>
<style type="text/css">

</style>
<script>

</script>
</head>
<body>
<br>
<br>

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

<div id="tabs1">
<div class="menu1box">
<ul id="menu1">
   <liclass="hover"onmouseover="setTab(1,0)"><ahref="#">新闻</a></li>
   <lionmouseover="setTab(1,1)"><ahref="#">评论</a></li>
   <lionmouseover="setTab(1,2)"><ahref="#">技术</a></li>
   <lionmouseover="setTab(1,3)"><ahref="#">点评</a></li>
</ul>
</div>
<div class="main1box">
<div class="main" id="main1">
   <ulclass="block"><li>新闻列表</li></ul>
  <ul><li>评论列表</li></ul>
  <ul><li>技术列表</li></ul>
  <ul><li>点评列表</li></ul>
</div>
</div>
</div>
<br>
<br>

<div id="tabs2">
<div class="menu2box">
<divid="tip2"></div>
<ul id="menu2">
   <liclass="hover"onmouseover="nowtab(2,0)"><ahref="#">新闻</a></li>
   <lionmouseover="nowtab(2,1)"><ahref="#">评论</a></li>
   <lionmouseover="nowtab(2,2)"><ahref="#">技术</a></li>
   <lionmouseover="nowtab(2,3)"><ahref="#">点评</a></li>
</ul>
</div>
<div class="main" id="main2">
新闻内容
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>