源代码

<!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. Google word/sheets 常见的使用:

    Google Sheets: 1, sheets 里面的单元格设置自动换行: 选中单元格: --> Format --> Text Wrapping --> Wrap(自动换行)/C ...

  2. JavaWeb初级进阶高级学习方向计划

    阶段1 语言基础 课程一.Java负基础扫盲课 1.初识Java 本课程从java开发环境配置开始,讲解了java语法基础 .类和面向对象.面向对象编程三大特性:封装.继承.多态.建议零基础学员从本课 ...

  3. C语言实现迷宫小游戏

    代码如下,时间太晚,有空补注释: #include<stdio.h> #include<string.h> #include<time.h> #include< ...

  4. 蓝桥杯近三年决赛题之一（15年B组）

    自己计时4小时做了试试,发现只用了2个小时多一点,第二题和第六题实在没办法,不会做,第五题用了暴力(过不了多少数据),其他三题在网上看了看 应该都是对的,下面放上试题及答案. 1. 标题:积分之迷 小 ...

  5. Fiddler抓包【2】_捕获设置

    1.Fiddler抓web网站请求 手动设置方法一:Tools--->WinINET Options--->连接--->局域网设置--->代理服务器勾选后“高级”---> ...

  6. 【JavaScript】第8章读书笔记

    本章常用的DOM方法 切记,页面的逻辑是:创建新的元素,给新的元素创建内容,通过appendChild把新元素的内容插入到新元素节点中:通过appendChild把新元素插入到已有元素节点中 书上的老 ...

  7. koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求

    koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...

  8. 彻底卸载Xubuntu Kubuntu

    卸载Xubuntu -linux-gnu blueman brltty brltty-x11 catfish cheese-common dbus-user-session dconf-cli deb ...

  9. Visual Studio 项目依赖

    在解决方案上点击右键,选择项目依赖项 选择需要发布的所有依赖项目 主要是为了解决插件项目DLL无法生成的问题

  10. ECMAScript6 入门教程记录 变量的解构赋值

    (1)变量的解构赋值 基本用法:ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). let a = 1; let b = 2; let c = ...