选项卡实现

最新推荐文章于 2024-06-17 09:00:23 发布

司空摘猫

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量56

点赞数

文章标签： css javascript html

本文链接：https://blog.csdn.net/sikongzhaimao/article/details/127961824

版权

HTML

 <body>
    <div id="main">
      <ul id="tabs">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <ul id="content">
        <li class="active">11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
      </ul>
    </div>

    <div id="main2">
      <ul id="tabs">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
      <ul id="content">
        <li class="active">11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
      </ul>
    </div>
    <div id="bottom"></div>
  </body>

CSS

#tabs {
      width: 800px;
      height: 50px;
      display: flex;
    }
    #tabs li {
      width: 200px;
      height: 50px;
      border: 1px solid #d3e;
      list-style: none;
    }
    #content {
      width: 800px;
      height: 400px;
      border: 1px solid burlywood;
      overflow: hidden;
      position: relative;
    }
    #content li {
      width: 100%;
      height: 100%;
      list-style: none;
      display: none;
      position: absolute;
      top: 0;
      left: 0;
    }
    #tabs .active {
      background-color: indianred;
    }

    #content .active {
      display: block;
    }

JavaScript

   // var tabs_li = document.querySelectorAll("#tabs li");
    // var content_li = document.querySelectorAll("#content li");
    // for (var i = 0; i < tabs_li.length; i++) {
    //   tabs_li[i].dataset.index = i; // 设置自定义属性保存点击序列
    //   tabs_li[i].onclick = function () {
    //     for(var m=0;m<tabs_li.length;m++){
    //         tabs_li[m].classList.remove("active")
    //         content_li[m].classList.remove("active")
    //     }
    //     tabs_li[this.dataset.index].classList.add("active");
    //     content_li[this.dataset.index].classList.add("active");
    //   };
    // }

    function Tabs(container, eventType) {
      var container = document.querySelector(container);
      this.tabs_li = container.querySelectorAll("#tabs li");
      this.content_li = container.querySelectorAll("#content li");
      this.change(eventType);
    }

    Tabs.prototype.change = function (eventType) {
      console.log(this);
      for (let i = 0; i < this.tabs_li.length; i++) {
        this.tabs_li[i].dataset.index = i; // 设置自定义属性保存点击序列

        this.tabs_li[i].addEventListener(eventType, () => {
          var index = i;
          for (var m = 0; m < this.tabs_li.length; m++) {
            this.tabs_li[m].classList.remove("active");
            this.content_li[m].classList.remove("active");
          }
          this.tabs_li[index].classList.add("active");
          this.content_li[index].classList.add("active");
        });
        // this.tabs_li[i].onclick = () => {
        //     var index = i
        //   for (var m = 0; m < this.tabs_li.length; m++) {
        //     this.tabs_li[m].classList.remove("active");
        //     this.content_li[m].classList.remove("active");
        //   }
        //   this.tabs_li[index].classList.add("active");
        //   this.content_li[index].classList.add("active");
        // };
      }
    };

    // var tabs1 = new Tabs("#main", "click");
    // var tabs2 = new Tabs("#main2", "mouseover");

    class Tabs1 {
      constructor(container, eventType) {
        this.container =document.querySelector(container);
        this.eventType = eventType;
        this.tabs_li = this.container.querySelectorAll("#tabs li");
        this.content_li = this.container.querySelectorAll("#content li");
        this.change(eventType);
      }

      change() {
        for (let i = 0; i < this.tabs_li.length; i++) {
          this.tabs_li[i].dataset.index = i; // 设置自定义属性保存点击序列

          this.tabs_li[i].addEventListener(this.eventType, () => {
            var index = i;
            for (var m = 0; m < this.tabs_li.length; m++) {
              this.tabs_li[m].classList.remove("active");
              this.content_li[m].classList.remove("active");
            }
            this.tabs_li[index].classList.add("active");
            this.content_li[index].classList.add("active");
          });
        }
      }
    }

    var tabs1 = new Tabs1("#main", "click");
    var tabs2 = new Tabs1("#main2", "mouseover");