源代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>选项卡</title>

    <style>

        #div1 input {background:#CCC;}

        #div1 div {width:200px; height:200px; background:#CCC; display:none;}

        #div1 .active {background:yellow;}

        #div1 .kin {background:red;}

    </style>

    <script>

        window.onload = function() {

            var oDiv = document.getElementById('div1');

            var aBtn = oDiv.getElementsByTagName('input');

            var aDiv = oDiv.getElementsByTagName('div');

            var i = 0;

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

                // index 属性可返回标签的索引位置

                aBtn[i].index = i;

                //测试i的索引位置

                // alert(i); 

                // 给onclick事件添加自定义方法

                aBtn[i].onclick = function() {

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

                        // 给未点击的按钮添加class="kin"

                        aBtn[i].className = 'kin';

                        // 给当前Div的class添加style="display:none"

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

                    }

                    // 鼠标点击那个按钮就给那个添加class="active"

                    this.className = 'active';

                    // 给当前的class添加style="display:block"

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

                };

            }

        };

    </script>

</head>

<body>

<div id="div1">

    <input type="button" value="txt1" class="active" />

    <input type="button" value="txt2" />

    <input type="button" value="txt3" />

    <div style="display:block;">txt1content</div>

    <div>txt2content</div>

    <div>txt3content</div>

</div>

</body>

</html>

运行结果

核心代码

1. index属性

作用：返回标签的索引位置

 aBtn[i].index = i;

2.给onclick事件添加自定义方法

aBtn[i].onclick = function() {
  for(i = 0; i < aBtn.length; i++){
    aBtn[i].className = 'kin';
    aDiv[i].style.display = 'none';
  }
 
  this.className = 'active';
  aDiv[this.index].style.display = 'block';
};

js面向过程-经典选项卡的更多相关文章

  1. js面向过程改写成面向对象--通用方法

    响亮的标题:一个万能的,保底的.面向过程改写成面向对象的方法 前提朗读:很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序,这个是必然的现象,不是每一位学js的一上来就会写面向对象 ...

  2. js面向过程-拖拽

    1.步骤分析: 1.1 获取id 1.2 当鼠标点击时执行的js 1.3当鼠标移动时执行的js 1.4当鼠标放开时执行的js 2.代码实现 <!DOCTYPE html> <html ...

  3. js面向过程 分页功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 面向对象和面向过程的js版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. JS面向对象与面向过程

    前言 面向对象编程: 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)--这个对象就称之为类 面向过程编程: 特点:封装,就是将你需要的功能放在一个对象里面 ------ ...

  6. JS高级---体会面向对象和面向过程的编程思想

    体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数 过渡,先熟悉记忆 <!D ...

  7. 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论（OO Vs 过程）------（一个简单的实例引发的沉思）

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  8. JS是面向过程、面向对象还是基于对象？面向对象的代码体现

    一.问题 javascript是面向对象的,还是面向过程的?基于对象是什么意思? 对象: 指的是对某一类事物进行抽象,抽象出这一类事物共同的特征以及行为(也就是属性和方法),那些拥有这一共同属性和方法 ...

  9. js执行过程

    正如我们了解的一样,当我们书写了JS程序之后,打开浏览器,我们的代码就可以开始运行了(当然保证你的代码没有问题,才能按照你的预期进行执行).刚才说的是JS执行的一个大的环境,今天我们学习一下,JS在解 ...

随机推荐

  1. Cocos Creater 监听程序到后台和重新到前台

    cocos creator前后台切换当玩家在玩游戏时,突然接了一个电话,此时游戏会被切到后台待机,所有的声音播放都会停止,等打完电话,回到游戏,游戏又会被切回前台来,需要手动播放声音.可使用如下代码 ...

  2. Kinetis Design Studio 下使用J-Link下载程序

    1.安装J-Link驱动. 在KDS安装目录下已自带J-Link驱动,进入以下目录(以我的为例): C:\Freescale\KDS_1.1.1\segger\USBDriver 将看到CDC.x64 ...

  3. <转载>XML操作

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Tex ...

  4. WinForm中 Asp.Net Signalr消息推送测试实例

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  5. laravel composer

    composer config -g repo.packagist composer https://packagist.phpcomposer.com 改安装包的全局镜像网址

  6. mySQL的行转列

    因为MYSQL里边没有  PIVOT      现记录:   原表格:   mysql语句: SELECT MAX(CASE WHEN corol='红' THEN NUM else 0 END) A ...

  7. 2019 Lonsdor K518S VS K518ISE

    2019 Lonsdor K518S VS K518ISE: The same: IMMO capabilities + Vehicle coverage. The difference: The u ...

  8. source insight 4.0.86.0 安装过程中出现的问题

    1.sourceinsight_4.0.86.0-setup.exe 2.sourceinsight4.exe覆盖安装目录中的sourceinsight4.exe 3.导入lic文件 过程中360会将 ...

  9. Mac appStore下载软件报500错误的解决方法

    Step1.打开"启动台": Step2:打开"其他": Step3:打开"终端": Step4:复制如下代码,主要不要作任何更改,不要有多 ...

  10. 什么是事务？事务特性？事务隔离级别？spring事务传播特性？

    一.事务的概述 什么是事务? 在数据库中,所谓事务是指一组逻辑操作单元即一组sql语句,当这个单元中的一部分操作失败,整个事务回滚,只有全部正确才完成提交.判断事务是否配置成功的关键点在于出现异常时事 ...