使用class写一个选项卡案例

最新推荐文章于 2024-05-17 13:52:13 发布

tangy_q__

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量80

点赞数

文章标签： javascript ecmascript html css 开发语言

本文链接：https://blog.csdn.net/tcugg/article/details/133798867

版权

此案例主要实现点击按钮时让对应的按钮高亮和内容区域显示不同的内容

案例效果展示：

1.首先将html内容写好

<!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>Document</title>
</head>

<body>
    <div class="tab">
        <!--按钮区域-->
        <ul>
            <li class="active">影片1</li>
            <li>影片2</li>
            <li>影片3</li>
            <li>影片4</li>
            <li>影片5</li>
        </ul>
        <!--内容区域-->
        <div class="con" data-hello="100">
            <div class="show">莫斯科行动</div>
            <div>孤注一掷</div>
            <div>坚如磐石</div>
            <div>变形金刚</div>
            <div>碟中谍7</div>
        </div>
    </div>

</body>

</html>

2.写css渲染样式

* {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 500px;
            min-height: 280px;
            background-color: orange;
            margin: 50px auto;
        }

        .tab ul {
            height: 45px;
            background-color: yellow;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab ul li {
            list-style: none;
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
        }

        .tab .con {
            height: 240px;
            background-color: #ccc;
            font-size: 14px;
            line-height: 100px;
        }

        .tab .con div {
            width: 100%;
            height: 100%;
            display: none;
        }

        .active {
            background-color: greenyellow;
        }

        .show {
            display: block !important;
        }

3.写入js实现按钮高亮是切换内容

class Tab {
            constructor(options) {
                // 解构赋值 
                const { btn, content } = options
                this.btns = document.querySelector(btn).children
                this.contents = document.querySelector(content).children
                console.log(this)

                this.handleClick()
            }
            // 点击按钮
            handleClick() {
                console.log('>>>', this);
                [...this.btns].forEach((it, index) => {
                    it.onclick = () => {
                        // 排他 高亮 
                        this.changeActive(index)
                    }
                })
            }
            changeActive(count) {
                //  this
                [...this.btns].forEach((it, index) => {
                    it.classList.remove('active')
                    this.contents[index].classList.remove('show')
                })

                // 让对应索引的高亮
                console.log(count)
                this.btns[count].classList.add('active')
                this.contents[count].classList.add('show')
            }
        }

        let t1 = new Tab({
            btn: '.tab>ul',
            content: '.con'
        })

这样就实现了案例所要实现的功能

完整代码：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab {
            width: 500px;
            min-height: 280px;
            background-color: orange;
            margin: 50px auto;
        }

        .tab ul {
            height: 45px;
            background-color: yellow;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }

        .tab ul li {
            list-style: none;
            width: 20%;
            height: 100%;
            text-align: center;
            line-height: 45px;
            cursor: pointer;
        }

        .tab .con {
            height: 240px;
            background-color: #ccc;
            font-size: 14px;
            line-height: 100px;
        }

        .tab .con div {
            width: 100%;
            height: 100%;
            display: none;
        }

        .active {
            background-color: greenyellow;
        }

        .show {
            display: block !important;
        }
    </style>
</head>

<body>
    <div class="tab">
        <!--按钮区域-->
        <ul>
            <li class="active">影片1</li>
            <li>影片2</li>
            <li>影片3</li>
            <li>影片4</li>
            <li>影片5</li>
        </ul>
        <!--内容区域-->
        <div class="con" data-hello="100">
            <div class="show">莫斯科行动</div>
            <div>孤注一掷</div>
            <div>坚如磐石</div>
            <div>变形金刚</div>
            <div>碟中谍7</div>
        </div>
    </div>
    <script>

        class Tab {
            constructor(options) {
                // 解构赋值 
                const { btn, content } = options
                this.btns = document.querySelector(btn).children
                this.contents = document.querySelector(content).children
                console.log(this)

                this.handleClick()
            }
            // 点击按钮
            handleClick() {
                console.log('>>>', this);
                [...this.btns].forEach((it, index) => {
                    it.onclick = () => {
                        // 排他 高亮 
                        this.changeActive(index)
                    }
                })
            }
            changeActive(count) {
                //  this
                [...this.btns].forEach((it, index) => {
                    it.classList.remove('active')
                    this.contents[index].classList.remove('show')
                })

                // 让对应索引的高亮
                console.log(count)
                this.btns[count].classList.add('active')
                this.contents[count].classList.add('show')
            }
        }

        let t1 = new Tab({
            btn: '.tab>ul',
            content: '.con'
        })
    </script>
</body>

</html>