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. Balala Power!(大数+思维)

    Balala Power! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)T ...

  2. Instapaper 使用经验和技巧

    Instapaper 分类本质是文件夹整理,没有标签. 文件夹意味着一篇文章只能放在一个文件夹里,不像标签可以实现一篇文章多个标签的功能. 一.文件夹和Like功能 1.已有文件夹: Home:存放所 ...

  3. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  4. Android的代码都得自己一个个敲一遍吗？

          近期在Android学习中,碰到一个头疼的问题.众所周知Android是一个开发源码的平台,网上有非常多网友分享的关于各种样例的demo,比方扫描二维码,瀑布流等,对于前人已有的成果,我们 ...

  5. 《Python 机器学习》笔记（四）

    数据预处理--构建好的训练数据集 机器学习算法最终学习结果的优劣取决于两个主要因素:数据的质量和数据中蕴含的有用信息的数量. 缺失数据的处理 在实际应用过程中,样本由于各种原因缺少一个或多个值得情况并 ...

  6. adb通过TCP/IP连接提示 unable to connect to *, Connection refused的解决方法

    通过串口连接板子进入命令行,然后执行: su setprop service.adb.tcp.port 5555 stop adbd start adbd

  7. sql server2005版本中，len函数计算了字符串末尾的空格

    sql server2005版本中,len函数计算了字符串末尾的空格的长度,以下是测试脚本: print @@version declare @v varchar(max) set @v = 'hp, ...

  8. 基于CentOS的SSHD服务的Docker镜像

    原文地址 1.Dockerfile文件 FROM registry.aliyuncs.com/acs-sample/centos:6 MAINTAINER xuqh "xqh_163@163 ...

  9. django内容总结

    一.django请求的生命周期 1.django请求生命周期如图所示 2.django本身没有socket,客户端请求先到达wsgi然后再提交给django,而wsgi的本质就是个socket程序 注 ...

  10. PHP获取域名、IP地址的方法

    本文介绍下,在php中,获取域名以及域名对应的IP地址的方法,有需要的朋友参考下. 在php中可以使用内置函数gethostbyname获取域名对应的IP地址,比如: 1 <?php 2 ech ...