tab切换自动轮播[class类extends继承实现]_能自动切换的tab-优快云博客

本文链接：https://blog.youkuaiyun.com/Shaw_Jie/article/details/126942425

本文介绍了一个使用纯JavaScript实现的自动切换Tab栏效果的示例。通过自定义的Tabs类，可以轻松设置不同的Tab项及其对应的内容，并通过简单的配置实现自动轮播效果。文章详细展示了如何设置Tab项的样式、内容及如何触发自动切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>tab自动切换</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
      }
      .main {
        width: 1200px;
        height: 600px;
        margin: 30px auto;
        border: 1px solid #000;
        background: #fff;
      }
      .main .tabs_nav {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #000;
      }
      .main .tabs_nav ul li {
        width: 120px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border-right: 1px solid #000;
        float: left;
        position: relative;
        font-size: 20px;
        font-weight: bold;
      }
      .main .tabs_nav ul li.active {
        background: skyblue;
        color: #fff;
      }
      .main .tabs_nav ul li.active::before {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 120px;
        height: 1px;
        background: #fff;
      }
      .tabs_wrap {
        padding: 10px;
      }
    </style>
  </head>
  <body style="background: #f4f4f4">
    <div class="main">
      <div class="tabs_nav">
        <ul>
          <li>大片</li>
          <li>嘉宾聊天</li>
          <li>公开课</li>
          <li>体育</li>
          <li>NBA运作</li>
        </ul>
      </div>
      <div class="tabs_wrap">
        <div class="tabs_item">大片大片大片大片大片大片大片大片</div>
        <div class="tabs_item">嘉宾聊天嘉宾聊天嘉宾聊天嘉宾聊天</div>
        <div class="tabs_item">公开课公开课公开课公开课公开课公开课</div>
        <div class="tabs_item">体育体育体育体育体育体育体育体育</div>
        <div class="tabs_item">NBA运作NBA运作NBA运作NBA运作NBA运作</div>
      </div>
    </div>

    <script>
      class Tabs {
        // constructor构造函数
        constructor(obj) {
          //获取tab切换的标签
          this.tabs_btn = document.querySelectorAll(obj.tab_nav);
          //获取tab切换的内容区域
          this.tabs_item = document.querySelectorAll(obj.tab_item);

          this.index = obj.currentIndex; //配置当前哪一个tab切换的标签选中
          this.className = obj.className; //配置tab切换的标签选中的类名
          this.changeTabs();
        }

        //定义一个方法，隐藏方法,排他
        hide() {
          for (let i = 0; i < this.tabs_btn.length; i++) {
            this.tabs_btn[i].className = "";
            this.tabs_item[i].style.display = "none";
          }
        }
        //定义一个方法，显示方法
        show() {
          this.tabs_btn[this.index].className = this.className;
          this.tabs_item[this.index].style.display = "block"; //选中tab切换的内容显示
        }
        //定义一个方法，改变方法
        changeTabs() {
          // this指的是实例对象
          this.hide();
          this.show();
          // 换成箭头函数
          for (let i = 0; i < this.tabs_btn.length; i++) {
            this.tabs_btn[i].onclick = () => {
              //   console.log(this); //箭头函数中的this指向上下文父级
              this.index = i;
              this.hide(); //hide()这个方法是在实例上边写的
              this.show(); //show()这个方法是在实例上边写的
            };
          }
        }
      }

      // 定义一个子类来继承父类
      // 子类autoTabs的功能是实现自动切换，父类实现的功能是点击切换
      class AutoTabs extends Tabs {
        constructor(obj) {
          //obj 形参
          super(obj); //super指的是调用父类中的this
          this.autoPlay();
        }
        changeIndex() {
          //   console.log(this);//this指向实例AutoTabs
          this.index += 1;
          if (this.index > this.tabs_btn.length - 1) {
            this.index = 0;
          }
          this.hide(); //父类中定义的方法
          this.show(); //父类中定义的方法
        }

        autoPlay() {
          //   console.log(this); //this指向实例AutoTabs
          let that = this; //为了改变定时器中的this指向
          setInterval(function () {
            // console.log(this); //因为定时器中的this指向window
            that.changeIndex();
          }, 2000);
        }
      }
      let tabs = new Tabs({
        tab_nav: ".main .tabs_nav ul li", //配置tab切换的标签按钮
        tab_item: ".main .tabs_wrap .tabs_item", //配置tab切换标签对应的内容
        currentIndex: 1, //当前哪一个索引显示
        className: "active", //配置tab切换的标签选中的类名
      });
      let autoTabs = new AutoTabs({
        tab_nav: ".main .tabs_nav ul li", //配置tab切换的标签按钮
        tab_item: ".main .tabs_wrap .tabs_item", //配置tab切换标签对应的内容
        currentIndex: 1, //当前哪一个索引显示
        className: "active", //配置tab切换的标签选中的类名
      });
    </script>
  </body>
</html>