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. caffe小问题汇总（持续更新）

    PS:所有问题均在caffe-windows下产生 1.为什么AlexNet中,InnerProduct_Layer(fc8)层的输出可以直接作为Accuracy_Layer层的输出? 答:首先,我们 ...

  2. iOS学习笔记（三）——iOS系统架构

    iOS的系统架构分为四个层次:核心操作系统层(Core OS layer).核心服务层(Core Services layer).媒体层(Media layer)和可触摸层(Cocoa Touch l ...

  3. [Spring Data MongoDB]学习笔记－－牛逼的MongoTemplate

    MongoTemplate是数据库和代码之间的接口,对数据库的操作都在它里面. 注:MongoTemplate是线程安全的. MongoTemplate实现了interface MongoOperat ...

  4. iOS 静态库的制作

    按照公司的想法 要开发一款SDK,于是就抽空学习一下静态枯的制作过程. 在IOS中有静态库和动态库的区分,下面我们就来详细介绍一下. 一.静态库和动态库的详细介绍. 我们平时的工程中或多或少都要引入第 ...

  5. [翻译] flask-SocketIO

    最近开发工作需要用到websocket去替代老办法轮询,因为我们的web系统使用flask搭建,所以使用flask-SocketIO作为我们的websocket方案,因此顺手翻译官方文档 *** Fl ...

  6. 如何将大数据保存到 MySql 数据库

    1. 什么是大数据 1. 所谓大数据, 就是大的字节数据,或大的字符数据. 2. 标准 SQL 中提供了如下类型来保存大数据类型: 字节数据类型: tinyblob(256B), blob(64K), ...

  7. mono下c#和c交互，字符串处理

    起因是ulua里,从luajit读字符串到c#里,做了编码转换,如下 public static string lua_tostring(IntPtr luaState, int index) { v ...

  8. W5100硬件设计和调试要点

    文章来源:成都浩然 与MCU的接口 W5100与MCU接口採用并行总线方式(假设要使用SPI接口,建议採用W5200),因此W5100与MCU的接口设计相对简单.以AT89C52为例,例如以下图所看到 ...

  9. jquery on 确认删除

    $(document).on('click', '.delbtn', function() {         if (confirm("确定要删除吗?")) {          ...

  10. Overload and Override without Overwrite - Java

    Override(覆盖/覆写): 子类Override父类中的函数(方法).Overload(重载): 同一个类中包含多个同名的函数(方法), 但各个函数的参数列表不同. Override和Overl ...