找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发用面向对象的方法写选项卡功能

2018-11-19 分类：JavaScript 阅读(564) 评论(0)
前端开发要注意的浏览器兼容性
前端开发浏览器兼容集合
前端开发那个浏览器兼容性好
面向对象的选项卡 原则 先写出普通的写法，然后改成面向对象写法 普通方法变型
尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中
改成面向对象 全局变量就是属性 函数就是方法 Onload中创建对象 改this指向问题
<style>
    div1 div,
    #div2 div {
        width: 200px;
        height: 200px;
        border: 1px #000 solid;
        display: none;
    }
    .active {
        background: red;
    }
</style>
<script>
    var oParent = null
    var aInput = null
    var aDiv = null
    window.onload = function() {
        var oParent = document.getElementById(‘div1’)
        var aInput = oParent.getElementsByTagName(‘input’)
        var aDiv = oParent.getElementsByTagName(‘div’)
        init()
    }
    function init() {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].index = i
            aInput[i].onclick = change
        }
    }
    function change() {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].className = ”
            aDiv[i].style.display = ‘none’
        }
        this.className = ‘active’
        aDiv[this.index].style.display = ‘block’
    }
</script>
<div id=”div1″>
    <input class=”active” type=”button” value=”1″ />
    <input type=”button” value=”2″ /> <input type=”button” value=”3″ />
    <div style=”display:block”>11111</div>
    <div>22222</div>
    <div>33333</div>
</div>
这个是我们的传统写法 下面是我们改成面向对象的写法：
<style>
    div1 div,
    #div2 div {
        width: 200px;
        height: 200px;
        border: 1px #000 solid;
        display: none;
    }
    .active {
        background: red;
    }
</style>
<body>
    <script>
        window.onload = function() {
            var t1 = new Tab(‘div1’)
            t1.init()
        }
        function Tab(id) {
            this.oParent = document.getElementById(id)
            this.aInput = this.oParent.getElementsByTagName(‘input’)
            this.aDiv = this.oParent.getElementsByTagName(‘div’)
            this.iNow = 0
        }
        Tab.prototype.init = function() {
            var This = this
            for (var i = 0; i < this.aInput.length; i++) {
                this.aInput[i].index = i
                this.aInput[i].onclick = function() {
                    This.change(this)
                }
            }
        }
        Tab.prototype.change = function(obj) {
            for (var i = 0; i < this.aInput.length; i++) {
                this.aInput[i].className = ”
                this.aDiv[i].style.display = ‘none’
            }
            obj.className = ‘active’
            this.aDiv[obj.index].style.display = ‘block’
        }
    </script>
    <div id=”div1″>
        <input class=”active” type=”button” value=”1″ />
        <input type=”button” value=”2″ /> <input type=”button” value=”3″ />
        <div style=”display:block”>11111</div>
        <div>22222</div>
        <div>33333</div>
    </div>
    看代码的话，简单的功能可能用面向对象会觉得还复杂些。
    如果说我们页面中有多个选项卡，第二选项卡多了一个自动播放的功能，，
    那么我们可以这样添加
    <style>
        div1 div,
        #div2 div {
            width: 200px;
            height: 200px;
            border: 1px #000 solid;
            display: none;
        }
        .active {
            background: red;
        }
    </style>
    <body>
        <script>
            window.onload = function() {
                var t1 = new Tab(‘div1’)
                t1.init()
                var t2 = new Tab(‘div2’)
                t2.init()
                t2.autoPlay()
            }
            function Tab(id) {
                this.oParent = document.getElementById(id)
                this.aInput = this.oParent.getElementsByTagName(‘input’)
                this.aDiv = this.oParent.getElementsByTagName(‘div’)
                this.iNow = 0
            }
            Tab.prototype.init = function() {
                var This = this
                for (var i = 0; i < this.aInput.length; i++) {
                    this.aInput[i].index = i
                    this.aInput[i].onclick = function() {
                        This.change(this)
                    }
                }
            }
            Tab.prototype.change = function(obj) {
                for (var i = 0; i < this.aInput.length; i++) {
                    this.aInput[i].className = ”
                    this.aDiv[i].style.display = ‘none’
                }
                obj.className = ‘active’
                this.aDiv[obj.index].style.display = ‘block’
            }
            Tab.prototype.autoPlay = function() {
                var This = this
                setInterval(function() {
                    if (This.iNow == This.aInput.length – 1) {
                        This.iNow = 0
                    } else {
                        This.iNow++
                    }
                    for (var i = 0; i < This.aInput.length; i++) {
                        This.aInput[i].className = ”
                        This.aDiv[i].style.display = ‘none’
                    }
                    This.aInput[This.iNow].className = ‘active’
                    This.aDiv[This.iNow].style.display = ‘block’
                }, 2000)
            }
        </script>
        <div id=”div1″>
            <input class=”active” type=”button” value=”1″ />
            <input type=”button” value=”2″ /> <input type=”button” value=”3″ />
            <div style=”display:block”>11111</div>
            <div>22222</div>
            <div>33333</div>
        </div>
        <div id=”div2″>
            <input class=”active” type=”button” value=”1″ />
            <input type=”button” value=”2″ /> <input type=”button” value=”3″ />
            <input type=”button” value=”4″ />
            <div style=”display:block”>11111</div>
            <div>22222</div>
            <div>33333</div>
            <div>44444</div>
        </div>
    </body>
    这样看就觉得好用多了
</body>
浏览器 前端开发
前端开发 浏览器 编辑
前端开发 浏览器兼容性
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论