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. # 「NOIP2010」关押罪犯（二分图染色+二分答案）

    「NOIP2010」关押罪犯(二分图染色+二分答案) 洛谷 P1525 描述:n个罪犯(1-N),两个罪犯之间的仇恨值为c,m对仇恨值,求怎么分配使得两件监狱的最大仇恨值最小. 思路:使最大xxx最小 ...

  2. python基础之 线程_进程关系

    上图

  3. CSS(上)

    目录 CSS(上) 什么是CSS? CSS的优点 CSS的引入方式 行内样式 内部样式 外部样式 CSS的两大特性 CSS选择器 基本选择器 组合选择器 更多选择器 选择器的优先级 CSS(上) 什么 ...

  4. Max History CodeForces - 938E (组合计数)

    You are given an array a of length n. We define fa the following way: Initially fa = 0, M = 1; for e ...

  5. WPF最小化窗体后激活函数显示不了窗体

    WPF最小化窗体后激活函数显示不了窗体 今天测试小哥给我提了一些问题,其中一个问题是这样的,点击web端的一个链接,是能启动本地的一个应用程序的,如果本地应用程序已启动(通过tcp进程间通信),那么应 ...

  6. WPF中Brush类型

    画刷Brush使用 画刷类 SolidColorBrush LinearGradientBrush RadialGradientBrush ImageBrush VisualBrush Drawing ...

  7. JavaScript冒泡排序法实现排序操作

    var arr = [10,8,6,9,1,7,1,13,5,1,9]; //冒泡排序 function bubbleSort(tmpArr){ for(var i = tmpArr.length-1 ...

  8. 09 Python两种创建类的方式

    第一种比较普遍的方式: class Work(): def __init__(self,name): self.name = name w = Work('well woker') 这样就简单创建了一 ...

  9. ECharts模拟百度迁徙实例

    本实例原始信息: 作者:anix 演示地址:Echarts模拟迁徙 源码地址:GitHub-ananix-qianxi 前言 "百度地图春节人口迁徙大数据"(简称"百度迁 ...

  10. json字符串与json对象的转换

    JSON(JavaScript Object Notation)格式是开发中较为常见的数据格式,优点是轻量,便于理解和解析生成.JSON对象是一个无序的键值对集合,以 { } 为开头和结尾,键与键之间 ...