this 大作战：用面向对象写现象卡效果

最新推荐文章于 2024-06-27 00:45:00 发布

石界星空

最新推荐文章于 2024-06-27 00:45:00 发布

阅读量273

点赞数

分类专栏： js 文章标签：面向对象

本文链接：https://blog.csdn.net/stone10086/article/details/73804812

版权

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 input{
                background: white;
            }
            .active{
                background: yellow !important;
            }
            #div1 div{
                width: 200px;
                height: 200px;
                background: #ccc;
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="div1">
            <input type="button" class="active" value="a"/>
            <input type="button" name="" id="" value="b" />
            <input type="button" name="" id="" value="c" />
            <div style="display: block;">aaa</div>
            <div>bbb</div>
            <div>ccc</div>
        </div>

    </body>
    <script type="text/javascript">

        /*
         * 面向过程的选型卡写法
         */
/*      var oDiv=document.getElementById('div1');
        var aBtn=oDiv.getElementsByTagName('input');
        var aDiv=oDiv.getElementsByTagName('div');
        for (var i=0;i<aBtn.length;i++) {
            aBtn[i].index=i;
            aBtn[i].onclick=function(){
                for (var k=0;k<aBtn.length;k++) {
                    aBtn[k].className='';
                    aDiv[k].style.display='none';

                }
                this.className='active';
                aDiv[this.index].style.display='block';
            }
        }*/


        /*
         *面向对象方法选项卡
         */

        //使用
        new Tab('div1');

        //构建函数：+属性；
        function Tab(id){
            //var this=new Object();
            var oDiv=document.getElementById(id);
            this.aBtn=oDiv.getElementsByTagName('input');
            this.aDiv=oDiv.getElementsByTagName('div');
            var _this=this;//this为object
            for (var i=0;i<this.aBtn.length;i++) {
                this.aBtn[i].index=i;
                this.aBtn[i].onclick=function(){
                    _this.click(this);
                };
            }
        }

        //原型：+方法
        Tab.prototype.click=function(obj){
            for (var k=0;k<this.aBtn.length;k++) {
                this.aBtn[k].className='';
                this.aDiv[k].style.display='none';
            }
            obj.className='active';
            this.aDiv[obj.index].style.display='block';
        }
    </script>
</html>