把面向过程的程序改写成面向对象的形式用面向对象写选项卡

最新推荐文章于 2022-11-05 16:50:09 发布

_阿锋丶

最新推荐文章于 2022-11-05 16:50:09 发布

阅读量885

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_43342105/article/details/104112372

版权

javascript 专栏收录该内容

50 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 面向对象选项卡 -->
<!-- 
把面向过程的程序改写成面向对象的形式
原则：
不能有函数套函数，但可以有全局变量
过程
  onload -  构造函数
  全局变量 -  属性
  函数    - 方法
改错
    this 事件 闭包 传参
对象与闭包
    通过闭包传递this


 -->

    <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-color: white;
        }
        
        #div1 input.active{
            background-color: yellow;
        }
    
        #div1 div{
            width:200px;
            height:200px;
            background-color: #CCC;
            
            display:none;
        }
        </style>
         <script>

            //   window.onload 初始化整个程序     构造函数 初始化整个对象

            //  变量                              属性
            //  函数                              方法

            //  对比以前的选项卡函数没有了嵌套
          
            window.onload=function(){
                new TabSwitch('div1');
            }

           function TabSwitch(id){

                var  _this=this;
                var oDiv=document.getElementById(id);
                this.aBtn=oDiv.getElementsByTagName ('input');//对象的所有属性都要加this；
                this.aDiv=oDiv.getElementsByTagName('div');
                
                for(var i=0;i<this.aBtn.length;i++)
                {
                    this.aBtn[i].index=i;
                    this.aBtn[i].onclick=function(){
                        _this.fnClick(this)
                            
                    }
            };

          TabSwitch.prototype.fnClick=function(oBtn){
             
                        for(var i=0;i<this.aBtn.length;i++)
                        {
                            this.aBtn[i].className=' ';
                            this.aDiv[i].style.display='none';
                        }
                        oBtn.className='active';
                        // console.log(this.index)
                        this.aDiv[oBtn.index].style.display="block";
                    }
                }

        </script>
</head>
<body>
     <!-- 
        
     -->
    <div id="div1">
        <input type="button" value="aaa"/>
        <input type="button" value="bbb"/>
        <input type="button" value="ccc"/>
        <div style=" display: block;">aaa</div>
        <div>asdaa</div>
        <div>aasda</div>
    </div>
    <!-- 

     -->
</body>
</html>