类写法和构造函数写法实现选项卡案例

最新推荐文章于 2024-05-24 23:45:01 发布

废物的自我修养记录

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量169

点赞数

分类专栏：笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45989814/article/details/132058571

版权

笔记专栏收录该内容

58 篇文章 0 订阅

订阅专栏

布局：

    <div class="container1">
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <ol>
            <li class="active">11111</li>
            <li>22222</li>
            <li>33333</li>
            <li>44444</li>
            <li>55555</li>
        </ol>
    </div>

样式:

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .container1 {
            width: 300px;
            height: 200px;
        }

        .container1 ul {
            height: 50px;
        }

        .container1 ul li {
            float: left;
            width: 60px;
            height: 50px;
            list-style-type: none;
        }

        .container1 ol {
            height: 150px;
            width: 300px;
        }

        .container1 ol li {
            height: 150px;
            width: 300px;
            display: none;
        }

        .container1 ul .active {
            background: orange;
        }

        .container1 ol .active {
            display: block;
            background: orange;
        }
    </style>

类实现：

class Tabs {
            constructor(className, type) {
                this.container = document.querySelector(className);
                this.headerItems = this.container.querySelectorAll("ul li");
                this.contentItems = this.container.querySelectorAll("ol li");
                this.type = type;

                this.change();
            }

            change = function () {
                for (let i = 0; i < this.headerItems.length; i++) {
                    this.headerItems[i].addEventListener(this.type, () => {
                        for (let n = 0; n < this.headerItems.length; n++) {
                            this.headerItems[n].classList.remove("active");
                            this.contentItems[n].classList.remove("active");
                        }

                        this.headerItems[i].classList.add("active");
                        this.contentItems[i].classList.add("active");
                    }, false)
                }
            };
        }

new Tabs(".container1", 'mouseover');

构造函数实现：

function Tabs(className) {
        this.container = document.querySelector(className);
        this.headerItems = this.container.querySelectorAll("ul li");
        this.contentItems = this.container.querySelectorAll("ol li");

        this.change();
      }

      Tabs.prototype.change = function() {

        for (let i = 0; i < this.headerItems.length; i++) {
          this.headerItems[i].onclick = () => {
            for (let n = 0; n < this.headerItems.length; n++) {
              this.headerItems[n].classList.remove("active");
              this.contentItems[n].classList.remove("active");
            }

            this.headerItems[i].classList.add("active");
            this.contentItems[i].classList.add("active");
          };
        }

      };

      new Tabs(".container1");