源代码

<!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. centos7.5 安装gaussian09和 gaussianview4

    一.安装gaussian09 1. 解压安装包 $ mkdir Gaussian$ cd Gaussian$ tar xvf g09_linux.tar 2. 设置环境变量 #gaussian09 e ...

  2. 1#认识Java

    Java是一种面对对象的编程语言. Java共分为三个体系:JavaEE.JavaSE.JavaMS Java SE 1: Java Platform Standard Edition,Java平台标 ...

  3. upCode

    更新源码 Sub main() Dim str As String str = "这是测试的字符串对话框" MsgBox str Sheets(1).Select End Sub

  4. docker 标记和推送镜像

    打开Launchpad并定位到docker Quickstart Terminal图标. 点击Docker Quickstart Terminal图标, 打开一个窗口. 将光标定位到Docker Qu ...

  5. nodejs 前端项目编译时内存溢出问题的原因及解决方案

    现象描述 昨天用webpack打包Vue的项目时,node内存溢出而停止build项目,即是项目构建过程中频繁报内存溢出:FATAL ERROR: CALL_AND_RETRY_LAST Alloca ...

  6. 软件工程实践助教每周小结 < 福州大学 | 傅明建 >

    第一周助教小结 1. 助教博客链接: http://www.cnblogs.com/sinceway/ 2. 本周点评的作业数量:约22份,有多次交互 3. 本周点评有困难的作业链接: https:/ ...

  7. turtle画王思聪吃热狗（杨艳春，何金凝小组）

    点击此处查看视频:http://v.douyin.com/RCY8GD/import turtle as t t.setup(450,300) t.pensize(4) t.color('black' ...

  8. Linux替换文件内容sed命令

    sed -e 4a\newline testfile  //在第四行后添加一行,并将结果输出到标准输出.-e,以指定脚本处理文本文件:a,新增. nl /etc/passwd | sed '2,5d' ...

  9. IP通信基础学习第四周(上)

    IP地址现在由因特网名字与号码指派公司ICANN进行分配,它是标志一个主机(或路由器)和一条链路的接口,其编址方法有:分类的IP地址.子网的划分.构成超网. 分类两级IP地址可以记为:IP::={&l ...

  10. react初始

    一.一些基础概念 1.框架:基于整个项目的 2.库:在某个模块中单独使用,轻量级的 在vue中,DOM的操作时DOM指令调用js 在react中,所有的DOM 渲染都是由JS完成的 组件基于视图 模块 ...