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. FFmpeg4.0笔记：本地媒体文件解码、帧格式转换、重采样、编码、封装、转封装、avio、硬解码等例子

    Github https://github.com/gongluck/FFmpeg4.0-study/blob/master/official%20example/my_example.cpp #in ...

  2. WPF使用资源图片

    一.加载本项目的图片 WPF引入了统一资源表示Uri来标识和访问资源.其中较为常见的情况是用Uri加载图像.Uri表达式的一把形式为:协议+授权+路径 协议:pack:// 授权:有两种,一种用于访问 ...

  3. @RequestMapping-限定参数映射

    限定参数映射 测试:

  4. 2018最新版 手机号、验证码正则表达式 jq + 小程序

    HTML: <!-- 表单 --> <input class="weui-input" id="tel" type="tel&quo ...

  5. O024、Nova组件如何协同工作

    参考https://www.cnblogs.com/CloudMan6/p/5415836.html   Nova 物理部署方案   前面大家已经看到 Nova 由很多子服务组成,我们也知道OpenS ...

  6. 100、神器的 routing mesh （Swarm07）

    参考https://www.cnblogs.com/CloudMan6/p/7930321.html   上一节我们提到了 swarm 的 routing mesh .当外部访问任意节点的8080端口 ...

  7. Django框架——基础教程（总）

    1. Django简介 Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架 ...

  8. int 问号的使用

    单问号---为泛型 Nullable<int> 的简写方式. 双问号---用于判断前一个操作数是否为null,如为null则"返回"后一个操作数,否则"返回& ...

  9. 目录：Matrix Differential Calculus with Applications in Statistics and Econometrics,3rd_[Magnus2019]

    目录:Matrix Differential Calculus with Applications in Statistics and Econometrics,3rd_[Magnus2019] Ti ...

  10. JVM常用指标查询

    一.what‘s going on in Java Application 当系统卡顿,应用莫名被杀掉,我们应该怎么排查?在我已知的系统挂掉的情况,只经历过两种:1.内存申请不了(OOM):2.CPU ...