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. Python字典推导式将cookie字符串转化为字典

    Python中的列表推导式一般是大家所熟悉的,可以极大的简洁代码:而Python中的字典推导式和列表推导式也是大同小异的 cookie: PHPSESSID=et4a33og7nbftv60j3v9m ...

  2. 忘记虚拟机中Linux的登录密码解决办法

    一.重启系统,在开机过程中,快速按下键盘上的方向键↑和↓.目的是告知引导程序,我们需要在引导页面选择不同的操作,以便让引导程序暂停. 2.使用↑和↓将选择行设置为第一行(背景高亮即为选中),按下键盘上 ...

  3. IDEA2018.2.6激活（可用）

    破解插件下载: 链接:https://pan.baidu.com/s/1j2_kEm_Akcph6Qb8hr6soQ 提取码:hv64 将下载包放入bin文件夹下,修改bin中的两个文件 idea.e ...

  4. dubbo看这一篇就够了

    为什么要有分布式 近年来微服务.分布式等名词非常的火,那么我们又为什么要进行系统拆分?如何进行拆分呢?阿里的dubbo作为分布式框架的代表,无疑是推动了整个行业技术的进步.以前中小型公司都是一个war ...

  5. SQL这样干，你就是给自己刨坑.....

    SQL是作为一个程序员接触得非常多的一种语言,但是,很多时候,我们会发现,有些SQL的执行效率异常的差,造成了数据库的负担.我们通过分析这些有问题的SQL,就可以发现很多我们平时在写SQL的时候忽略的 ...

  6. 07 Python之协程

    协程: 协程是一种用户态的轻量级线程, 即协程是由用户程序自己控制调度的 1.Greenlet import time # import greenlet from greenlet import g ...

  7. 关于sqlmap的两个小坑

    i春秋作家:__LSA__ 0x00 概述 近日在利用sqlmap注入测试时遇到一个奇怪的现象,高版本sqlmap无法检测出注入,但是低版本的可以测出注入,并且能跑出数据不是误报,经过对比测试和查看s ...

  8. linux下mysql忘记密码解决方案

    一.写随笔的原因:之前自己服务器上的mysql很久不用了,忘记了密码,所以写一下解决方案,以供以后参考 二.具体的内容: 1. 检查mysql服务是否启动,如果启动,关闭mysql服务 运行命令:ps ...

  9. epoll机制和简述

    在linux的网络编程中,很长的时间都在使用select来做事件触发.在linux新的内核中,有了一种替换它的机制,就是epoll.相比于select,epoll最大的好处在于它不会随着监听fd数目的 ...

  10. zabbix监控，微信报警

    微信告警 访问这个地址创建企业微信   https://work.weixin.qq.com/