面向对象的选项卡ES5和ES6的写法

最新推荐文章于 2022-07-26 11:19:18 发布

街头嗳昧℡

最新推荐文章于 2022-07-26 11:19:18 发布

阅读量56

点赞数

分类专栏： js 文章标签： html5 js

本文链接：https://blog.csdn.net/m0_58845957/article/details/120711660

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .tit span{
            float: left;
            width: 100px;
            background: #ccf;
            }
            .tit .select{
                background: #99f;
            }
            .con div{
                display: none;
                width: 300px;
                height: 200px;
                background: #cfc;
            }
            .con .show{
                display: block;
            }
            
        </style>
    </head>
    <body>
        <div class="tit" id="tabTit">
            <span class="select">1</span>
            <span>2</span>
            <span>3</span>
        </div>
        <div class="con" id="tabCon">
            <div class='show'>初始化TAB</div>
            <div>TAB切换2</div>
            <div>Tab切换3</div>
        </div>
        <script>
             /* function TabSwitch(titId, titEle, conId, conEle){
                this.titEle = document.getElementById(titId).getElementsByTagName(titEle)
                this.conEle = document.getElementById(conId).getElementsByTagName(conEle)
                var that = this
                for(var i = 0;i<this.titEle.length;i++){
                    this.titEle[i].id = i
                    this.titEle[i].onclick = function(){
                        console.log(that);
                        console.log(this);
                        that.tabFun(this)
                    }
                }
            }
            TabSwitch.prototype.tabFun = function(objTab){
                for(var i = 0;i<this.titEle.length;i++){
                    this.titEle[i].className = ''
                    this.conEle[i].className = ''
                }
                objTab.className = 'select'
                this.conEle[objTab.id].className = 'show'
            }
            new TabSwitch('tabTit','span','tabCon','div') */
            
            
            class Tab{
                constructor(titId, titEle, conId, conEle){
                    this.titEle = document.getElementById(titId).getElementsByTagName(titEle)
                    this.conEle = document.getElementById(conId).getElementsByTagName(conEle)
                    var that = this
                    for(var i = 0;i<this.titEle.length;i++){
                        this.titEle[i].id = i
                        this.titEle[i].onclick = function(){
                            console.log(that);
                            console.log(this);
                            that.tabFun(this)
                        }
                    }
                }
            }
            Tab.prototype.tabFun = function(objTab){
                for(var i = 0;i<this.titEle.length;i++){
                    this.titEle[i].className = ''
                    this.conEle[i].className = ''
                }
                objTab.className = 'select'
                this.conEle[objTab.id].className = 'show'
            }    
            new Tab('tabTit','span','tabCon','div')
        </script>
    </body>
</html>

街头嗳昧℡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象的选项卡ES5和ES6的写法

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .tit span{ float: left; width: 100px; background: #ccf; ...
复制链接

扫一扫

专栏目录