将面向过程的选项卡改为面向对象的选项卡（接上一篇博客）

最新推荐文章于 2022-11-05 16:50:09 发布
最新推荐文章于 2022-11-05 16:50:09 发布
阅读量93 收藏
点赞数
原文链接：http://www.cnblogs.com/kinblog/p/10788567.html
版权

面向过程-选项卡代码

<!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.首先将函数内的嵌套函数都单独出来

<script>
    var aBtn = null;
    var aDiv = null;

    window.onload = function () {
        var oDiv = document.getElementById('container');
        aBtn = oDiv.getElementsByTagName('input');
        aDiv = oDiv.getElementsByTagName('div');
        var i = 0;

        for(i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = tab;
        }
    };
        function tab() {
                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';
            };
</script>

 2.然后把window.onload改为构造函数

<script>
    var aBtn = null;
    var aDiv = null;

    window.onload = function() {
        var oTab = TabSwitch('container');
    }

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        aBtn = oDiv.getElementsByTagName('input');
        aDiv = oDiv.getElementsByTagName('div');
        var i = 0;

        for(i = 0; i < aBtn.length; i++) {
            aBtn[i].index = i;
            aBtn[i].onclick = tab;
        }
    };
　　function tab() {
       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'; };
</script>

 3.最后变量改为属性，函数改为方法

<script>
    window.onload = function() {
        var oTab = new TabSwitch('container');
    };

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        var i = 0;
        var _this = this;

        for(i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);
            };
        }
    };
    TabSwitch.prototype.tab = function (oBtn) {
        for(i =0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = 'kin';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };
    </script>

最终代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <style>
        #container .active {
            background-color: green;
        }
        #container .kin {
            background-color: red;
        }
        #container div {
            display: none;
            width: 300px;
            height: 300px;
            background-color: #ccc;
        }
    </style>

    <script>
    window.onload = function() {
        var oTab = new TabSwitch('container');
    };

    function TabSwitch(id) {
        var oDiv = document.getElementById(id);
        this.aBtn = oDiv.getElementsByTagName('input');
        this.aDiv = oDiv.getElementsByTagName('div');
        var i = 0;
        var _this = this;

        for(i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onclick = function () {
                _this.tab(this);
            };
        }
    };
    TabSwitch.prototype.tab = function (oBtn) {
        for(i =0; i < this.aBtn.length; i++) {
            this.aBtn[i].className = 'kin';
            this.aDiv[i].style.display = 'none';
        }
        oBtn.className = 'active';
        this.aDiv[oBtn.index].style.display = 'block';
    };
    </script>
</head>
<body>
    <div id="container">
        <input type="button" value="text1">
        <input type="button" value="text2">
        <input type="button" value="text3">
        <div style="display: block;">text1container</div>
        <div>text2container</div>
        <div>text3container</div>
    </div>
</body>
</html>

 

转载于:https://www.cnblogs.com/kinblog/p/10788567.html

weixin_30414635
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript——面向对象（2、面向过程改写成面向对象）
weixin_43340295的博客
07-10 353
如何将面向过程的程序，改写成面向对象的程序 原则：不能有函数套函数，但可以有全局变量 过程： 1、onload -> 构造函数 2、全局变量 -> 属性 3、函数 -> 方法 4、改错：this、事件、闭包、传参 示例：选项卡（面向过程） //js <script> window.onload=function () { var oDiv=document.getElementById('div1'); var aBtn=oDiv.getElementsBy
从面向过程到面向对象
热门推荐
秋叶原 && Mike || 麦克
05-27 3万+
从 IBM 公司的约翰·巴库斯在 1957 年开发出世界上第一个高级程序设计语言 Fortran 至今，高级程序设计语言的发展已经经历了整整半个世纪。在这期间，程序设计语言主要经历了从面向过程（如 C 和 Pascal 语言）到面向对象（如：C++、Java、Objective-C），再到面向组件编程（如 .NET 平台下的 C# 语言），以及正在快速发展的面向服务架构技术（如 SOA 和 WebService）。
JS高级 - 面向对象3（面向过程改写面向对象）
weixin_33997389的博客
10-05 136
改写： 1.前提：所有东西都在 onload 里 2.改写：不能有函数嵌套，可以有全局变量 onload --&gt; 构造函数 全局变量 --&gt; 属性 函数 --&gt; 方法 4.改错： this this啥时候会出问题？ 1.定时器 &lt;script&gt; function Aar() { this.a = 12; setI...
JS-面向过程改造为面向对象
pipiang的博客
04-11 463
原始页面代码&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/lo
JS基于面向对象实现的选项卡效果示例
10-20
主要介绍了JS基于面向对象实现的选项卡效果,结合实例形式分析了javascript基于面向对象技术动态操作页面元素的流程与相关注意事项,需要的朋友可以参考下
选项卡改变为面向对象写法后，复用和增加方法.md
09-09
面向对象写的一个点击选项卡，复用这个面向对象写法，同时为不同的添加不一样的方法
JS使用面向对象技术实现的tab选项卡效果示例
10-20
主要介绍了JS使用面向对象技术实现的tab选项卡效果,结合具体实例形式分析了js面向对象技术与tab选项卡功能的具体实现技巧,需要的朋友可以参考下
JS面向对象编程实现的Tab选项卡案例详解
10-15
主要介绍了JS面向对象编程实现的Tab选项卡,结合具体案例形式详细分析了JS基于面向对象程序设计实现Tab选项卡的相关操作技巧,需要的朋友可以参考下
面向过程向面向对象转变
RitaAndWakaka的博客
03-28 209
1.全局函数调用#include&lt;iostream&gt; using namespace std; //案例一 设计立方体类Cube，求出立方体的面积和体积 //求出两个立方体是否相等（全局函数和成员函数） class Cube { public: void setA(int a) { m_a = a; } void setB(int b) { m_b = b; } ...
由面向过程转换面向对象
kk的博客
11-05 636
我们在面向对象中只需要去购买主机，显示屏，显卡等部件，这些封装好的部件也叫对象。而不是像面向过程一样，从0到1地去制造这些零部件，这样的效率会大大地降低。因此，在我们面向对象编程中，只需要去调用这些对象即可。在工业层面上，也叫做。缺点(其实也不叫缺点)：要先思考，将所要制作的东西拆分成哪些部件。是符合我们的思考习惯，一步一步地区解决问题。就是后续的代码的可维护性，可扩展性都比较差！面向过程即是处理一件事情，我都是。
把面向过程的程序改写成面向对象的形式 用面向对象写选项卡
weixin_43342105的博客
01-30 836
<!DOCTYPE html> <html lang="en"> <head> <!-- 面向对象选项卡 --> <!-- 把面向对象的程序改写成面向对象的形式 原则： 不能有函数套函数，但可以有全局变量 过程 onload - 构造函数 全局变量 - 属性 函数 - 方法 改错 this 事件 闭包 传...
从面向过程到面向对象的转变
AOOOOO李
11-18 746
面向对象： ​ Java的核心思想就是OOP 面向过程 & 面向对象： 面向过程思想： 步骤清晰简单，第一步做什么，第二步做什么… 面对过程适合处理一些较为简单的问题 面向对象思想： 物以类聚，分类的思维模式，思考问题首先会解决问题需要哪些分类，然后对这些分类进行单独思考。最后才对某个分析下的细节进行面向过程的思索。 面向对象适合处理复杂的问题，适合处理需要多人协作的问题！ 对于描述复杂的事物，为了从宏观上把握，从整体上合理分析，我们需要使用面向对象的思路来分析整个系统。
选项卡用面向过程和面向对象方式实现
m0_64946537的博客
12-28 380
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选.
js面向过程改写成面向对象--通用方法
anbachun6816的博客
11-20 365
响亮的标题：一个万能的，保底的。面向过程改写成面向对象的方法 前提朗读：很多刚接触js面向对象的时候都不知道如何能快速的写出一个面向对象的程序，这个是必然的现象，不是每一位学js的一上来就会写面向对象的程序。小编这里介绍的方法属于一个面向过程到面向对象的过度期间，（这里要明白面向对象的一些常识：构造函数创建出对象，对象.属性，对象.方法） 一：改写前提步骤： 　　1.前提：面向过程...
面向过程改变成面向对象三步曲
FireBird_one的博客
05-24 2229
// 面向过程改变成面向对象三步曲 // //第一步，用面向过程的方法完成功能 window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmousedown = function (ev) { var ev = ev ||
javaScript 高级01 类与对象
weixin_45734686的博客
11-04 77
javaScript 高级01 1. 面向过程与面向对象 1.1 面向过程 分析出解决问题所需要的步骤，一步一步的用函数去实现这些功能。 优点：简单，方便，性能优 缺点：不好改，维护难度大 1.2 面向对象 基于过程划分成一个个对象，然后合理分工实现功能 2. 对象与类 2.1 对象 一个具体的事物，由属性和方法组成的一个无序键对值的集合。 属性：事物的特征 方法：事物的行为 2.1....
简单的选项卡改变为面向对象的写法的一点学习经验总结
Mr_pets的博客
09-09 216
简单的选项卡改变为面向对象的写法的一点学习经验总结 写在前面：这里是我学习过程中一个点击选项卡改变为面向对象的步骤，如有错误，欢迎大神指教，谢谢 一个简单的点击选项卡 谷歌展示的样子基本上是这样的： 以下是代码区： **html:** <div class="div1"> <input type="button" name="1" value="选项1" cla...
选项卡改变为面向对象写法后，复用和增加方法
Mr_pets的博客
09-09 162
选项卡改变为面向对象写法后，复用和增加方法 写在前面：这里相当是<简单的选项卡改变为面向对象的写法的一点学习经验总结>后的一个延续版，如果有兴趣可以CSDN上搜搜看<简单的选项卡改变为面向对象的写法的一点学习经验总结>后，可能更好的理解这里的文章，当然啦，大神随意啦，或者给点指导也行，希望可以帮到大家 页面代码结构 **HTML:** <div class="di...
面向对象微观上还是面向过程对吗
最新发布
07-20
在微观上，面向对象和面向过程可以理解为不同的代码组织方式。 面向过程编程将程序分解为一系列的步骤，强调程序的流程和函数的调用。程序的逻辑由一系列函数的调用和处理数据的过程组成。 而面向对象编程则将程序...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值