构造+原型实现tab切换

最新推荐文章于 2024-06-28 13:48:05 发布

菲允龙歌

最新推荐文章于 2024-06-28 13:48:05 发布

阅读量481

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100715091

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

构造+原型实现tab切换

<!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>Document</title>
    <style>
        div>div{ display: none; border: 1px solid #f00; height: 200px; width: 200px}
        .red{ background: orange}
    </style>
</head>
<body>
    <div id='box'>
        <input type="button" value="aaa" class="red">
        <input type="button" value="bbb">
        <input type="button" value="ccc">
        <div style="display: block">aaa</div>
        <div>bbb</div>
        <div>ccc</div>
    </div>
    <script>
        /*var box = document.getElementById('box')
        var inp = box.getElementsByTagName('input')
        var div = box.getElementsByTagName('div')
        for(var i=0;i<inp.length;i++){
            inp[i].index = i
            inp[i].onclick = fun
        }
        function fun(){
            for(var i=0;i<inp.length;i++){
                inp[i].className=''
                div[i].style.display = 'none'
            }
            // this.className = 'red'
            inp[this.index].className = 'red'
            div[this.index].style.display = 'block'          
        }*/
        //面向对象  tab切换
        function Tab(id){
            this.box = document.getElementById(id)
            this.inp = this.box.getElementsByTagName('input')
            this.div = this.box.getElementsByTagName('div')
            for(var i=0;i<this.inp.length;i++){
                this.inp[i].index = i
                // console.log(this.inp.length)
                var self = this;//  存下原来的this指向对象
                this.inp[i].onclick = function(){  //  点击事件里的this  发生改变了
                    self.fun(this)
                    console.log(this)
                }
            }
        }
        Tab.prototype.fun = function(x){
            for(var i=0;i<this.inp.length;i++){
                this.inp[i].className=''
                this.div[i].style.display = 'none'
            }
            console.log(x.index)// this.inp[i].index = i
            this.inp[x.index].className = 'red'
            this.div[x.index].style.display = 'block'      
        }
        new Tab('box');
    </script>
</body>
</html>

菲允龙歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
构造+原型实现tab切换

构造+原型实现tab切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...
复制链接

扫一扫