源代码

<!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. win 下 python ImportError: No module named requests

    第一次弄爬虫,报库找不到,网上找了半天,一般都让都让改成绝对路径...那不是饮鸩止渴嘛. 然后 在无意中发现,不需要控制台输入pip命令,因为不是在Linux下啊,,win下直接在pycharm里添加 ...

  2. localforage调用setItem时出现DOMException错误的解决方法

    今天使用localforage时出现下面的错误: Uncaught (in promise) DOMException transaction.onabort.transaction.onerror ...

  3. UGUI中UI与模型混合显示

    法一: 利用Render Texture 在project面板创建 在面板中在创建一个Camera,对准要显示的模型 对Render Texture 进行设置 在Canvas下创建RawImage 就 ...

  4. Laravel 安全：避免 SQL 注入

    当你使用 Eloquent 查询时,如: User::where('name', $input_name)->first(); Eloquent 内部使用的是 PDO 参数绑定,所以你的请求是安 ...

  5. ubuntu window 10 双系统

    https://rufus.ie/ U盘制作工具 http://releases.ubuntu.com/18.04/ubuntu-18.04.2-desktop-amd64.iso   ubuntu ...

  6. java基础语法-内部类与匿名内部类

    1.成员内部类(声明在类内部&&方法之外) class Person{ String name = "韩梅梅"; int age; class Bird{ Stri ...

  7. urlconnection代码

    package com.yucheng.connection; import java.io.BufferedReader; import java.io.InputStream; import ja ...

  8. 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'groups)VALUES('1','hh','hh@163.com','Boss')' at line 1

    mysql8.0版本 在已存在的表里插入一条数据 insert INTO api_user(id,username,email,groups)VALUES('1','hh','hh@163.com', ...

  9. centos7安装pip

    转自:https://www.cnblogs.com/mangoVic/p/6428369.html 默认情况下,centos7是没有pip的,可以通过如下命令安装 首先安装epel扩展源: yum ...

  10. IP通信基础的第一个星期

    IP通信基础不仅是很多专业课程的基础,同时学好它,在以后很多工作上都可以运用到,有网络工程师.通信工程师等等,当然,有些证书也会涉及到IP通信基础,有网络中级高级 CCNA等等. 那么,学好IP通信基 ...