js 面向对象第一课 tab标签切换

最新推荐文章于 2022-10-20 22:24:00 发布

beata_zhang

最新推荐文章于 2022-10-20 22:24:00 发布

阅读量179

点赞数

分类专栏： web前端学习

本文链接：https://blog.csdn.net/qq_30834535/article/details/100940763

版权

web前端学习专栏收录该内容

20 篇文章 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>面向对象第一课</title>
    <style>
        .active {
            background: yellow;
        }
    </style>
</head>

<body>
    <div class="tabs">
        <button class="active">tab1</button>
        <button>tab2</button>
        <button>tab3</button>
        <p class="active">content1</p>
        <p>content2</p>
        <p>content3</p>
    </div>

    <script>
        class Tabs {
            constructor(tabs, contents) {
                // 定义属性
                this.tabs = tabs;
                this.contents = contents;
                this.tabs.forEach((tab, index) => {
                    tab.onclick = () => {
                        this.setActive(index);
                    }

                });
            }
            // 定义方法
            setActive(index) {
                this.tabs.forEach(tab => {
                    tab.classList.remove('active');
                })
                this.contents.forEach(content => {
                    content.classList.remove('active');
                })
                this.tabs[index].classList.add('active');
                this.contents[index].classList.add('active');
            }
        }
        let tabs = document.querySelectorAll('button');
        let contents = document.querySelectorAll('p');
        //new出一个新的对象,并且拥有定义的所有属性及方法
        let t = new Tabs(tabs, contents);
    </script>
</body>

</html>

beata_zhang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 面向对象第一课 tab标签切换

<!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-...
复制链接

扫一扫