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. 32位Win7下安装与配置PHP环境（一）

    运行PHP网站,主要需要安装.配置三个软件,Apache.PHP和MySQL.如果需要编辑调试PHP程序,还要安装一个编辑调试软件. 一. Apache Apache是和IIS类似的一个软件,是运行在 ...

  2. delphi 中配置文件的使用（*.ini）和TIniFile 用法

    一.配置文件 .ini 文件是基于文本类型的格式文件,用于存储程序初始化和配置数据. .ini文件是有段(Sections)和键(key)组成的,每个文件可以有 n个段(每个段有方括号括起来),每个段 ...

  3. MySQL复制(三):常见的复制任务

    复制案例:包括横向扩展.热备 报表 企业需要挖掘有价值的报表信息,使用SLAVE,可以避免干扰到master的复制. 通过binlog获取某个时间范围的所有事件 $ mysqlbinlog --for ...

  4. nginx反向代理三台web

    1.首先我们需要在服务器中三个不同名字,并将他们赋值 2.切换到nginx—conf  把三台机器的nginx的配置文件分别命名为web1.conf.web2.conf.web3.conf vim的赋 ...

  5. make编译三

    多目标 Makefile 的规则中的目标可以不止一个,其支持多目标,有可能我们的多个目标同时依赖于一个文件,并且其生成的命令大体类似.于是我们就能把其合并起来.但是如果多个目标的生成规则的执行命令是同 ...

  6. More about Parameter Passing in Python(Mainly about list)

    我之前写了一篇关于Python参数传递(http://www.cnblogs.com/lxw0109/p/python_parameter_passing.html)的博客, 写完之后,我发现我在使用 ...

  7. 爬虫基础库之Selenium

    1.简介 selenium最初是一个自动化测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览器的操作, ...

  8. [笔记]Go语言在Linux环境下输出彩色字符

    Go语言要打印彩色字符与Linux终端输出彩色字符类似,以黑色背景高亮绿色字体为例: fmt.Printf("\n %c[1;40;32m%s%c[0m\n\n", 0x1B, & ...

  9. AJAX实现弹窗显示详情，全选和批量删除

    以Nation表为例,将Nation表显示在页面上,每一行数据前面加上复选框,后面加上查看详情,点击以弹窗形式显示每一行的数据,并且在表格最后一行加上全选复选框,点击选中全部数据,后面跟一个批量删除按 ...

  10. asp.net Cookie 用户登陆时记住我

    /// <summary> /// 判断Cookie中存储的数据 /// </summary> protected void CheckUserCookie() { //先判断 ...