脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 →

非常不错的三种简洁的Tab导航（网页选项卡）简析

 更新时间：2007年08月31日 21:27:24   作者：  
在网页中应用选项卡可以使网页显得更紧凑，结合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>
   <ul><li>点评列表</li></ul>
  </div>
</div>
</div>

第一、二种形式的JS代码:
复制代码 代码如下:

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)实现效果。
复制代码 代码如下:

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


[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
您可能感兴趣的文章:

相关文章

  • Javascript处理循环的异步操作指南

    Javascript处理循环的异步操作指南

    这篇文章主要给大家介绍了关于Javascript处理循环的异步操作的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
    2022-03-03
  • js关于精确计算和数值格式化以及直接引js文件

    js关于精确计算和数值格式化以及直接引js文件

    本文为大家介绍下关于精确计算和数值格式化以及直接引js文件，大家可以学习下
    2014-01-01
  • echarts横向柱状图简单实现方法

    echarts横向柱状图简单实现方法

    这篇文章主要给大家介绍了关于echarts横向柱状图简单实现的相关资料,ECharts是百度前端开发部开发的一个开源可视化库,它可以帮助开发者轻松的实现各种数据可视化,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • js添加类名的两种方法

    js添加类名的两种方法

    这篇文章主要介绍了js添加类名的两种方法,一种是通过className来添加、删除类名,另一种是通过classList来添加、删除类名,感兴趣的朋友跟随小编一起看看吧
    2023-11-11
  • JavaScript使用indexOf()实现数组去重的方法分析

    JavaScript使用indexOf()实现数组去重的方法分析

    这篇文章主要介绍了JavaScript使用indexOf()实现数组去重的方法,结合实例形式分析了使用indexOf()方法进行数组的判断与去重相关原理与具体操作技巧,需要的朋友可以参考下
    2018-09-09
  • 在线所见即所得HTML编辑器的实现原理浅析

    在线所见即所得HTML编辑器的实现原理浅析

    这篇文章主要介绍了在线所见即所得HTML编辑器的实现原理浅析,本文用初始化、打开编辑功能、获取编辑器的内容、增加样式设置、再进一步等步骤阐述在线编辑器的基本实现原理,需要的朋友可以参考下
    2015-04-04
  • JavaScript自动设置IFrame高度的小例子

    JavaScript自动设置IFrame高度的小例子

    JavaScript自动设置IFrame高度的小例子，需要的朋友可以参考一下
    2013-06-06
  • js fetch异步请求使用实例详解

    js fetch异步请求使用实例详解

    fetch是一种HTTP数据请求的方式,是XMLHttpRequest的一种替代方案,fetch不是ajax的进一步封装,而是原生js,下面这篇文章主要给大家介绍了关于js fetch异步请求使用的相关资料,需要的朋友可以参考下
    2021-11-11
  • 基于原生JS实现分页效果的示例代码

    基于原生JS实现分页效果的示例代码

    这篇文章主要为大家详细介绍了如何利用原生js实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • JS中setTimeout()的用法详解

    JS中setTimeout()的用法详解

    setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method
    2013-04-04

最新评论