面向对象的方式实现tab切换

最新推荐文章于 2021-12-01 22:14:48 发布

No one is perfect

最新推荐文章于 2021-12-01 22:14:48 发布

阅读量257

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Macheal_ycq/article/details/103019994

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
            height: 30px;
        }
        .tab {
            width: 600px;
            margin: 50px auto;
        }
        li {
            float: left;
            width: 150px;
            height: 30px;
            line-height: 30px;
        }
        li.ac {
            background: #ccc;
        }
        .content {
            width: 600px;
            height: 350px;
        }
        .content div {
            display: none;
            height: 350px;
        }
        .content div.ac {
            display: block;
        }
        .content img {
            width:100%;
            height:100%;
        }
    </style>
</head>

<body>
    <div class="tab" id="tab1">
        <ul>
            <li class="ac">pic1</li>
            <li>pic2</li>
            <li>pic3</li>
        </ul>
        <div class="content">
            <div class="ac">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573467260521&di=17864a07892590acf7b797ae67e0ed4b&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180919%2F5cc04a43e9b14460946caf1be6bf1d75.jpg"
                    alt="">
            </div>
            <div>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573467277587&di=adf3c8ce8642f23d256f6ad433fcd608&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn20%2F288%2Fw623h465%2F20180905%2Fff27-hitesuy7814151.jpg"
                    alt="">
            </div>
            <div>
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1574062005&di=2eacf87d56c245292d90ff70c8f7303a&imgtype=jpg&er=1&src=http%3A%2F%2Fdingyue.nosdn.127.net%2FYS3e1xnwUZ437JNeVRXL7G8kF6hdgJRZs1AdTaE6p6sjs1538193803400.jpg"
                    alt="">
            </div>
        </div>
    </div>
    <script>
        class Chu {
        //获取构造函数传入的值写入select
            constructor(select) {
                this.center = document.querySelector(select)
                this.btn = document.querySelectorAll("li")
                this.boor = document.querySelectorAll(".content div")
                this.dianji()
            }
            //点击事件
            dianji() {
                this.btn.forEach((element, index) => {
                    // console.log(element)
                    element.onclick = () => {
                        // console.log(index)
                        this.xuan(index)
                    }
                })
            }

渲染
            xuan(index) {
                for (var i = 0; i < this.btn.length; i++) {
                    this.btn[i].className=''
                }
                this.btn[index].className="ac"
            }
        }
        new Chu("#tab1")
    </script>
</body>

</html>