1、在网页制作过程中，我们经常会用到选项卡切换效果，它能够让我们的网页在交互和布局上都能得到提升

原理：在布局好选项卡的HTML结构后，我们可以看的出来，选项卡实际上是三个选项卡标头和三个对应的版块，如下图，是三个标头分别是教育，娱乐，汽车，当我们单击教育时，教育那个选项卡标头的背景会变成激活状白色，下面的的三个DIV形成的版块只会显示第一个教育的内容。当我们单击娱乐时，娱乐那个选项卡标头的背景会变成激活状白色，下面的的三个DIV形成的版块只会显示第二个娱乐的内容。当我们单击汽车时，汽车那个选项卡标头的背景会变成激活状白色，下面的的三个DIV形成的版块只会显示第三个汽车的内容。

3、 具体的实现是通过getElementsByTagName方法，先对选项卡三个标头H3进行捕获，产生一个数组，我们利用for循环分别对每个标头选项H3添加一个index属性作为它的序号同时注册单击事件，当某个H3被单击时，我们先把所有的H3都变成原始状态，没active类，然后再把被单击的H3要添加一个active类使其变成白色，此时，我们还要知道被单击H3的序号，这样我们可以去，设定与之序号相同的DIV显示出来，而其它的DIV刚隐藏起来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//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>选项卡</title>

<style type="text/css">

#tab{width:300px;border:3px solid #CCC;}

#tab .active{background-color:#FFF}

#tab h3{

margin:0px;

padding:0px;

font-size:14px;

float:left;

background-color:#CCC;

width:60px;

height:24px;

line-height:24px;

text-align:center;

}

#tab div{

clear:both;

height:100px;

font-size:14px;

padding:20px 0px 0px 20px;

display:none;

}

</style>

<script>

window.onload=function(){

var oTab=document.getElementById("tab");

var aH3=oTab.getElementsByTagName("h3");

var aDiv=oTab.getElementsByTagName("div");

for(var i=0;i<aH3.length;i++){

   aH3[i].index=i;

   aH3[i].onclick=function(){

   for(var i=0;i<aH3.length;i++){

   aH3[i].className="";

   aDiv[i].style.display="none";

   }

   this.className="active";

   aDiv[this.index].style.display="block";

   }

  }

 }

</script>

</head>

<body>

<div id="tab">

  <h3 class="active">教育</h3>

  <h3>娱乐</h3>

  <h3>汽车</h3>

  <div style="display:block">教育的内容</div>

  <div>娱乐的内容</div>

  <div>汽车的内容</div>

</body>

</html>

JS实现选项卡切换效果的更多相关文章

  1. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  2. 用js实现选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...

  3. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  4. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  7. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  8. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  9. js实现选项卡切换

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

随机推荐

  1. python学习【第三篇】基本数据类型

    Number(数字) int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647 在64位系统上,整数的位数为64位,取 ...

  2. PowerDesigner之设置(3)——根据Name首字母生成Code

    SQL版本:2000 PowerDesigner版本:16 网上有不少介绍 PowerDesigner Name/Code自动调整 的文章,但基本如出一辙. 这里,我就介绍下如何根据输入的Name根据 ...

  3. SharePoint服务器端对象模型 之 使用CAML进行数据查询

    (一)概述 在SharePoint的开发应用中,查询是非常常用的一种手段,根据某些筛选.排序条件,获得某个列表或者某一些列表中相应的列表条目的集合. 除去列表上的查询之外,在SharePoint中还大 ...

  4. WPF中DPI的问题

    先搞清楚一下几个概念: DPI:dots  per  inch ,每英寸的点数.我们常说的鼠标DPI,是指鼠标移动一英寸的距离滑过的点数:打印DPI,每英寸的长度打印的点数:扫描DPI,每英寸扫描了多 ...

  5. 关于angularjs中的ng-class的使用

    在angularjs中,包子认为ng-class的用法是相当的大,这个相当于jquery的addClass和removeClass.在这个地方,废话不多说,直接上一小段代码 当kefu这个变量为真的时 ...

  6. coursera 《现代操作系统》 -- 第十周 文件系统（2）

    身份验证 Authentication 知道用户是谁.通过账号密码.Id 这样的识别出来. 访问控制 Permission 知道用户是谁后. 主动控制 记录用户ID和对应的访问权限 --> 记录 ...

  7. Centos之目录处理命令（七）

    linux中 关于目录 有几个重要概念 一个是 / 根目录  还有一个当前用户的家目录 比如 root用户的家目录是 /root  普通用户的家目录是/home/xxx 下 root登录 默认家目录 ...

  8. Hibernate 框架入门(一)

    1. SSH Web 层: Struts2 业务层: Spring 持久层: Hibernate 2. Hibernate 概述 概述 Hibernate 是一个对象关系映射框架(ORM 框架); 对 ...

  9. Python如何实现单例模式？其他23种设计模式python如何实现？

    #使用__metaclass__(元类)的高级python用法 class Singleton2(type): def __init__(cls, name, bases, dict): super( ...

  10. B-Tree vs LSM-tree

    什么是B-树 一.已排序文件的查找时间 对一个有N笔记录的已排序表进行二叉查找,可以在O(log2N)比较级完成.如果表有1,000,000笔记录,那么定位其中一笔记录,将在20 ( log21,00 ...