JS 面向对象实现选项卡

最新推荐文章于 2022-07-20 13:03:00 发布

sam80000

最新推荐文章于 2022-07-20 13:03:00 发布

阅读量249

点赞数

分类专栏：前端知识点文章标签： js

本文链接：https://blog.youkuaiyun.com/sam80000/article/details/118390308

版权

前端知识点专栏收录该内容

35 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            
        }
        ul,ol,li{
            list-style: none;
        }

        .box{
            width: 600px;
            height: 300px;
            border: 10px solid #333;
            margin: 50px auto;
        }
        .box ul{
            width: 100%;
            height: 40px;
            overflow: hidden;
        }
        .box>ul>li{
            width: 200px;
            height: 100%;
            float: left;
            line-height: 40px;
            font-size: 30px;
            text-align: center;
            background-color: orange;
            cursor: pointer;
        }
        .box>ul>li.active{
            background-color: purple;
        }

        .box>ol{
            position: relative;
            width: 100%;
            height: 260px;
        }
        .box>ol>li{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            line-height: 260px;
            text-align: center;
            font-size: 100px;
            background-color: skyblue;
            display: none;
        }
        .box>ol>li.active{
            display: block;
        }
    </style>
    <script type="text/javascript">
        /* 
            1.抽象内容：
            属性： btns
                  tabs
            方法：能实现点击事件切换

            2.写构造函数
         */
        function Tabs(eles){
            //当前this 是实例对象

            this.eles=document.querySelector(eles); //获取div里的所有节点
            this.btns=this.eles.querySelectorAll("ul>li");  //获取ul下的li
            this.tabs=this.eles.querySelectorAll("ol>li");  //获取ol下的li

            //直接调用选项卡方法，就不用实例对象生成后再调用方法,生成对象后就可以实现功能
            this.change();
        }
        //实现选项卡
        Tabs.prototype.change=function(){
            //给所有选型卡添加点击事件,箭头函数使用的是外部作用域
            this.btns.forEach((item,index)=>{
                //给每个li添加事件
                item.addEventListener("click",()=>{
                    /* 
                        当前this：指向对象
                    */

                   //当点击一个li时，把所有的选项卡和显示内容清空
                   this.btns.forEach((t,i)=>{
                        t.className="";
                       this.tabs[i].className="";
                   })
                   
                   //给当前选项卡和显示内容，添加样式
                   item.className="active";
                   this.tabs[index].className="active";
            })        
        })
    }
    
        window.onload=function(){
           new Tabs(".box");
           new Tabs(".box2");
        }
        
    </script>
</head>
<body>
    <div class="box">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <div class="box box2">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
    <div class="box box3">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
    </div>
</body>
</html>