当前位置：首页 > 资讯 > 技术文档

推荐三种简洁的Tab导航（网页选项卡）简析

时间：2021-04-02 10:23 编辑：来源：阅读：
扫一扫，手机访问

摘要：推荐三种简洁的Tab导航（网页选项卡）简析

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

[url=#]
   <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>

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

[u]复制代码[/u][/url] 代码如下:

function setTab(m,n){
var tli=document.getElementById("menu"+m).getElementsByTagName("li"); /*获取选项卡的LI对象*/
var mli=document.getElementById("main"+m).getElementsByTagName("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)实现效果。

[url=#]
   <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="main" id="main2">
新闻内容
</div>
</div>

效果演示：

<div id="tabs0"> 
 [list] 
  [*]新闻[/*] 
  [*]评论[/*] 
  [*]技术[/*] 
  [*]点评[/*] 
 [/list] 
 <div class="main" id="main0"> 
  [list][*]新闻列表[/*][/list] 
  [list][*]评论列表[/*][/list] 
  [list][*]技术列表[/*][/list] 
  [list][*]点评列表[/*][/list] 
 </div> 
</div>

<div id="tabs1"> 
 <div class="menu1box"> 
  [list] 
   [*]<a href="http://www.1sucai.cn/article/10031.htm#">新闻[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]评论[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]技术[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]点评[/url][/*] 
  [/list] 
 </div> 
 <div class="main1box"> 
  <div class="main" id="main1"> 
   [list][*]新闻列表[/*][/list] 
   [list][*]评论列表[/*][/list] 
   [list][*]技术列表[/*][/list] 
   [list][*]点评列表[/*][/list] 
  </div> 
 </div> 
</div>

<div id="tabs2"> 
 <div class="menu2box"> 
  <div id="tip2"></div> 
  [list] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]新闻[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]评论[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]技术[/url][/*] 
   [*][url=http://www.1sucai.cn/article/10031.htm#]点评[/url][/*] 
  [/list] 
 </div> 
  <div class="main" id="main2"> 
新闻内容 
 </div> 
</div>

[Ctrl+A 全选注:[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]

全部评论(0)

上一篇：PHP那些琐碎的知识点(整理)
下一篇：jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

资讯排行榜
更多>>