选项卡用面向过程和面向对象方式实现

最新推荐文章于 2023-04-03 17:38:31 发布

young@Zhang

最新推荐文章于 2023-04-03 17:38:31 发布

阅读量381

点赞数

分类专栏： JS html css 文章标签： css html javascript

本文链接：https://blog.csdn.net/m0_64946537/article/details/122196852

版权

JS 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<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>选项卡</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol li {
            list-style: none;
        }

        .container {
            width: 600px;
            height: 600px;
            margin: 100px auto;
        }

        .container ul {
            height: 50px;
            width: 600px;
            display: flex;
            justify-content: center;
        }

        .container ul li {
            width: 200px;
            height: 50px;
            background-color: royalblue;
            border-right: 1px solid white;
            text-align: center;
            line-height: 50px;
        }

        .container ol {
            width: 600px;
            height: 550px;
            background-color: rgb(238, 182, 130);
        }

        .container ol li {
            text-align: center;
            font-size: 48px;
            line-height: 550px;
            display: none;
        }

        .active {
            background-color: red !important;
        }

        .on {
            display: block !important;
        }

        /* 
            1. 定义一选中效果样式
            2. 给选卡绑定事件
                2.1 循环遍历给每个选项卡绑定
                2.2 事件委托
            3. 清除所有选中效果样式
            4. 当前选中元素设置选中效果样式
        */
    </style>
</head>

<body>
    <div id="tab1" class="container">
        <!-- 选项卡tab区域 -->
        <ul>
            <li class="active" data-index="0">选项1</li>
            <li data-index="1">选项2</li>
            <li data-index="2">选项3</li>
        </ul>
        <!-- 选中内容区域 -->
        <ol>
            <li class="on">区域1</li>
            <li>区域2</li>
            <li>区域3</li>
        </ol>
    </div>

    <div id="tab2" class="container">
        <!-- 选项卡tab区域 -->
        <ul>
            <li class="active" data-index="0">选项1</li>
            <li data-index="1">选项2</li>
            <li data-index="2">选项3</li>
        </ul>
        <!-- 选中内容区域 -->
        <ol>
            <li class="on">区域1</li>
            <li>区域2</li>
            <li>区域3</li>
        </ol>
    </div>

    <script>
        //面对过程写法
        function changeColor() {
            const uls = document.querySelectorAll('ul>li')
            const ols = document.querySelectorAll('ol>li')
            for (let i = 0; i < uls.length; i++) {
                // 2.1 循环遍历给每个选项卡绑定
                uls[i].onclick = function () {
                    //3. 清除所有选中效果样式
                    clearActive()
                    this.classList.add('active')
                    let index = this.getAttribute('data-index')
                    ols[index].classList.add('on')
                }
            }

            function clearActive() {
                for (let i = 0; i < uls.length; i++) {
                    uls[i].classList.remove('active')
                    ols[i].classList.remove('on')
                }
            }
        }
        //changeColor()


        /*
        
           面向对象实现选项卡
             找选项卡对象，如果没有创建选项卡对象，先创建选项卡构造函数，再使用new语句实例化选项卡
               构造函数
                 =>属性和方法
        */
        //第一种写法
        // function Tab(id) {
        //     this.tabRoot = document.querySelector(id)
        //     this.uls = this.tabRoot.querySelectorAll('ul>li')
        //     this.ols = this.tabRoot.querySelectorAll('ol>li')
        //     //切换选项
        //     this.onTab = function () {
        //         let _this = this
        //         for (let i = 0; i < this.uls.length; i++) {
        //             this.uls[i].onclick = function () {
        //                 _this.clearActive()
        //                 this.classList.add('active')

        //                 let index = this.getAttribute('data-index')
        //                 _this.ols[index].classList.add('on')
        //             }
        //         }
        //     }
        //     //清除所有样式
        //     this.clearActive = function () {
        //         for (let i = 0; i < this.uls.length; i++) {
        //             this.uls[i].classList.remove('active')
        //             this.ols[i].classList.remove('on')
        //         }
        //     }
        // }

        // let tab1 = new Tab('#tab1')
        // let tab2 = new Tab('#tab2')
        // tab1.onTab()
        // tab2.onTab()


        //第二种写法
        class Tab {
            constructor(id) {
                this.tabRoot = document.querySelector(id)
                this.uls = this.tabRoot.querySelectorAll('ul>li')
                this.ols = this.tabRoot.querySelectorAll('ol>li')
            }

            onTab() {
                let _this = this

                for (let i = 0; i < this.uls.length; i++) {
                    this.uls[i].onclick = function () {
                        _this.onClear()
                        this.classList.add('active')
                        let index = this.getAttribute('data-index')
                        _this.ols[index].classList.add('on')
                    }
                }
            }
            onClear() {
                for (let i = 0; i < this.uls.length; i++) {
                    this.uls[i].classList.remove('active')
                    this.ols[i].classList.remove('on')
                }
            }
        }


        let tab1 = new Tab('#tab1')
        let tab2 = new Tab('#tab2')
        tab1.onTab()
        tab2.onTab()
    </script>
</body>

</html>

young@Zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
选项卡用面向过程和面向对象方式实现

<!DOCTYPE html><html lang="en"><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>选.
复制链接

扫一扫