JavaScript的Tab选项切换面向对象的封装

最新推荐文章于 2022-06-27 14:24:19 发布

冒泡的大鱼

最新推荐文章于 2022-06-27 14:24:19 发布

阅读量149

点赞数

分类专栏： H5 文章标签： javascript

本文链接：https://blog.csdn.net/y1314999/article/details/107549183

版权

H5 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

Tab切换面向对象的封装（4）

注：本文图片自己进行替换，创建一个文件夹，然后可以使用我的 01.png 02.png 03.png 04.png进行命名，或者自己自定义命名进行替换即可。 CSS样式与Js都不需要改变。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .tab {
            width: 800px;
            margin: 50px auto 0;
        }

        .header {
            overflow: hidden;
            height: 34px;
            border-top: 2px solid #06A86E;
        }

        .header h3 {
            float: left;
            width: 200px;
            line-height: 34px;
            text-align: center;
            font-size: 18px;
            font-weight: normal;
            color: #333;
            background-color: #F7F8F8;
        }

        .content {
            padding: 20px 0;
            height: 220px;
            overflow: hidden;
        }

        .content div {
            overflow: hidden;
            margin-bottom: 20px;
            display: none;
        }

        .content div img {
            width: 180px;
            height: 220px;
            margin: 0 10px;
            float: left;
        }

        /* 切换样式 */
        .header .active {
            color: #fff;
            background-color: #06A86E;
        }

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

<body>

    <div class="tab part1">
        <div class="header">
            <h3>喜剧</h3>
            <h3>剧情</h3>
            <h3>动作</h3>
            <h3>偶像</h3>
        </div>
        <div class="content">
            <div>
                <img src="01.png" alt="">
                <img src="01.png" alt="">
                <img src="01.png" alt="">
                <img src="01.png" alt="">
            </div>
            <div>
                <img src="02.png" alt="">
                <img src="02.png" alt="">
                <img src="02.png" alt="">
                <img src="02.png" alt="">
            </div>
            <div>
                <img src="03.png" alt="">
                <img src="03.png" alt="">
                <img src="03.png" alt="">
                <img src="03.png" alt="">
            </div>
            <div>
                <img src="04.png" alt="">
                <img src="04.png" alt="">
                <img src="04.png" alt="">
                <img src="04.png" alt="">
            </div>
        </div>
    </div>


    <div class="tab part2">
        <div class="header">
            <h3>喜剧</h3>
            <h3>剧情</h3>
            <h3>动作</h3>
            <h3>偶像</h3>
        </div>
        <div class="content">
            <div>
                <img src="01.png" alt="">
                <img src="01.png" alt="">
                <img src="01.png" alt="">
                <img src="01.png" alt="">
            </div>
            <div>
                <img src="02.png" alt="">
                <img src="02.png" alt="">
                <img src="02.png" alt="">
                <img src="02.png" alt="">
            </div>
            <div>
                <img src="03.png" alt="">
                <img src="03.png" alt="">
                <img src="03.png" alt="">
                <img src="03.png" alt="">
            </div>
            <div>
                <img src="04.png" alt="">
                <img src="04.png" alt="">
                <img src="04.png" alt="">
                <img src="04.png" alt="">
            </div>
        </div>
    </div>

    <script>
       
        //模块化
        (function () {
            //定义构造函数
            function Tab(tits, cons, preIndex) {
                this.tits = tits;
                this.cons = cons;
                this.preIndex = preIndex;
                // console.log(preIndex);

            }
            // 初始化方法
            Tab.prototype.init = function () {
                console.log(this.preIndex);
                console.log(this.tits[this.preIndex]);
                this.setClass(this.tits[this.preIndex], 'active');
                this.setClass(this.cons[this.preIndex], 'show');
                // console.log(this.cons);
               
                // console.log(this.tits);
            }
            //设置类名的方法
            Tab.prototype.setClass = function (dom,aClass) {
                // console.log(dom);
                dom.className = aClass;

            }


            //绑定事件
            Tab.prototype.bindEvent = function () {
                for (var i = 0; i < this.tits.length; i++) {
                    // this.tits[i].index = i;
                    this.tits[i].onclick = function (x) {
                        //清除上次的类名
                        this.setClass(this.tits[this.preIndex],'');
                        this.setClass(this.cons[this.preIndex],'');

                        //给当前的选中元素添加类名

                        this.setClass(this.tits[x],'active');
                        this.setClass(this.cons[x],'show');

                        //更新上次选中元素的下标

                        this.preIndex = x;
                    }.bind(this, i);
                }
            }

            window.Tab = Tab;   // 在window上定义构造函数名，支持外部的访问

            // console.log(Tab);

            //自执行函数
        })();
        // console.log(Tab);

        var part1 = document.querySelector('.part1');
        var part2 = document.querySelector('.part2');

        var tit1 = part1.querySelectorAll('.header h3');
        var con1 = part1.querySelectorAll('.content div');


        var tit2 = part2.querySelectorAll('.header h3');
        var con2 = part2.querySelectorAll('.content div');

        // console.log(tit1);
        // console.log(con1);
        var box1 = new Tab(tit1, con1, 0);
        // console.log(box1);
        box1.init();
        box1.bindEvent();

        var box2 = new Tab(tit2, con2, 0);
        // console.log(box1);
        box2.init();
        box2.bindEvent();

    </script>
</body>

</html>

冒泡的大鱼

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript的Tab选项切换面向对象的封装

Tab切换面向对象的封装（4）注：本文图片自己进行替换，创建一个文件夹，然后可以使用我的 01.png 02.png 03.png 04.png进行命名，或者自己自定义命名进行替换即可。 CSS样式与Js都不需要改变。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
复制链接

扫一扫

专栏目录