JS-面向对象之自动播放选项卡

最新推荐文章于 2021-09-16 09:40:37 发布

油菜花666

最新推荐文章于 2021-09-16 09:40:37 发布

阅读量450

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript基础

本文链接：https://blog.youkuaiyun.com/rose999ying/article/details/79797145

Javascript基础专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单选项卡功能。通过面向对象的方法，创建了Tab类来管理按钮点击事件及对应内容的显示隐藏。此外，还实现了自动播放功能，定时切换选项卡的内容。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>面对对象编程之选项卡</title>
  <style>
    #box1 div,#box2 div {
      width: 200px;
      height: 200px;
      border: 1px solid #666;
      display: none;
    }

    .active {
      background: #ED0
    }
  </style>
</head>
<body>
  <div id="box1">
    <input class="active" type="button" value="新闻" />
    <input type="button" value="娱乐" />
    <input type="button" value="财经" />
    <div style="display: block;">新闻</div>
    <div>娱乐</div>
    <div>财经</div>
  </div>
  <div id="box2">
    <input class="active" type="button" value="新闻" />
    <input type="button" value="娱乐" />
    <input type="button" value="财经" />
    <div style="display: block;">新闻</div>
    <div>娱乐</div>
    <div>财经</div>
  </div>

  <script>
    var oParent = null;
    var oInput = null;
    var oDiv = null;

    window.onload = function() {
      var tl = new Tab("box1");
      tl.init();
      var tll = new Tab('box2');
      tll.init();
      tll.autoPlay(this);
    }

    function Tab(id) {
      this.oParent =document.getElementById(id);
      this.oInput = this.oParent.getElementsByTagName('input');
      this.oDiv = this.oParent.getElementsByTagName('div');
      this.Now = 0;
    }

    Tab.prototype.init = function() {
      for(var i = 0; i < this.oInput.length; i++) {
        var This = this;
        this.oInput[i].index = i;
        this.oInput[i].onclick = function() {
          This.change(this);
        }
      }
    }

    Tab.prototype.change = function(obj) {
      for(var j = 0; j < this.oInput.length; j++) {
        this.oInput[j].className = "";
        this.oDiv[j].style.display = "none";
      }
      obj.className = "active";
      this.oDiv[obj.index].style.display = "block";
    }

    Tab.prototype.autoPlay = function(obj) {
      var This = this;
      setInterval(function() {
        if(This.Now === This.oInput.length-1) {
          This.Now = 0;
        }else {
          This.Now++;
        }
        for (var k = 0; k < This.oInput.length; k++) {
          This.oInput[k].className = "";
          This.oDiv[k].style.display = "none";
        }
        This.oInput[This.Now].className = "active";
        This.oDiv[This.Now].style.display = "block";
      },1000);
    } 
  </script>
</body>
</html>