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. HTML5网页文档结构

    2.1     Web标准 Web标准,使得Web开发更加容易.Web标准由万维网联盟(W3C)制定. 2.1.1          Web标准概述 Web标准的最终目的就是保证每个人都有权力访问相同 ...

  2. redis存储数据

    redis存储结构--5种 RedisTemplate访问Redis数据结构(一)--String https://blog.csdn.net/qq_25135655/article/details/ ...

  3. docker toolbox的redis 配置主从及哨兵模式保证高可用

    redis 的缓存中间件安装方法,简单举例如下: 环境: docker toolbox 一   主从模式1 搜索redis镜像  docker search redis2 拉取镜像docker pul ...

  4. 原生JS+CSS实现日期插件

    笔者最近在学习Element UI,觉得它提供的日期选择器既简单又美观,于是仿照着写了一个日期插件.笔者使用到的技术有ES5.CSS和HTML,控件兼容IE10+和谷歌浏览器.有一点需要注意,笔者使用 ...

  5. 韦东山嵌入式Linux学习笔记08--中断体系结构

    中断是什么? 举个栗子, 系统怎么知道你什么时候插入鼠标这个设备? 可以有两种处理方式: 1. 查询方式: 轮询去检测是否有设备插入; 2. 中断的方式 当鼠标插入这个事件发生时, 置位某个寄存器,告 ...

  6. 关于Linux单机、集群部署FastDFS分布式文件系统的步骤。

    集群部署:2台tarcker服务器,2台storage服务器. 192.168.201.86   ---------(trackerd+storage+nginx) 192.168.201.87   ...

  7. Vue自行封装常用组件-文本提示

    使用方法:1.在父组件中引入"toast.vue" //import toast from "./toast"; 2.在父组件中注册 toast //compo ...

  8. ES添加文档 踩坑之 —— The number of object passed must be even but was [1]

    读取文件,获取json格式的数据doc, 然后使用 bulkRequestBuilder.add(client.prepareIndex(index, type, id).setSource(doc) ...

  9. java将一数组乱序排列

    JAVA的Collections类中shuffle方法模拟了“洗牌”动作可以对list列表进行随机排序.如果一定要自己写,算法也很简单:假设数组array长度为n.用标准随机函数rand(n)生成[0 ...

  10. 解决java编译错误：编码 GBK 的不可映射字符 (0x8C)

    1. 问题概述: 程序很简单,打印一行字:你好,世界 (使用的工具是:win10自带的记事本.java的jdk:java development kit) 但是在打开终端进行编译时,报出了一个错误:编 ...