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. 【BZOJ4917】Hash Killer IV 乱搞

    [BZOJ4917]Hash Killer IV Description 有一天,tangjz造了一个Hash函数: unsigned int Hash(unsigned int v){     un ...

  2. QL 获取当前日期，年、月、日、周、时、分、秒

    ?select GETDATE() as '当前日期', DateName(year,GetDate()) as '年', DateName(month,GetDate()) as '月', Date ...

  3. 单片机教程4.C语言基础以及流水灯的实现

    单片机教程4.C语言基础以及流水灯的实现 C语言,没接触过计算机编程语言的人会把它看的很神秘,感觉非常的难,而在我看来,C语言的逻辑和运算,就是小学水平,所以大家不要怕它,我尽可能的从小学数学逻辑方式 ...

  4. 洛谷 P4768 [NOI2018]归程

    洛谷 361行代码的由来 数据分治大发好啊- NOI的签到题,可怜我在家打了一下午才搞了80分. 正解应该是kruskal重构树或排序+可持久化并查集. 我就分点来讲暴力80分做法吧(毕竟正解我也没太 ...

  5. struts2+Oracle实现管理员查看用户提交的意见功能

    说一下需求:这个功能类似于邮件功能,当用户在站点中提交一些建议及意见后.后台将其存入到Oracle数据库中.然后管理员登录站点,会看到还没有读过以及读过的意见及建议,并能够将未读过的意见及建议标记为已 ...

  6. etl接口测试总结

    刚做完一个项目接触到了etl接口,趁还热乎做个总结. etl接口功能测试点总结:1.数据量的检查:目标表与源表数据量是否一致2.字段正确性:拉取源表字段是否为目标表所需要字段(会出现拉错字段情况)3. ...

  7. 分布式计算开源框架Hadoop入门实践（一）

    在SIP项目设计的过程中,对于它庞大的日志在开始时就考虑使用任务分解的多线程处理模式来分析统计,在我从前写的文章<Tiger Concurrent Practice --日志分析并行分解设计与实 ...

  8. public,protected,privat区别

    关于从基类继承来的方法和属性的保护: --class Pig:public Animal {...} C++不仅允许你对在类里定义的方法和属性实施访问控制,还允许你控制子类可以访问基类里的哪些方法和属 ...

  9. ag-grid

    使用: import { AgGridVue } from "ag-grid-vue"; <ag-grid-vue style="width:100%;height ...

  10. Linux的XServer

    Moblin Core是在Gnome Mobile的平台上建立.我以前玩Linux,提交的都和图像没有关系,连Xwindows都不用启动,开机后直接进入文本命令行,所以这方面了解得很少,需要学习一下, ...