tab 滑动/点击切换封装

旧城等待， 2021-09-16 03:20 449阅读 0赞

新建 html 文件 ， 如： index.html , 引入一个 app.js 文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>tab 滑动/点击切换 封装</title>
    </head>
    <style> .active{ color: red; background: #eeeeee; } ul{ list-style: none; padding: 0; margin: 0; } #item1{ margin-top: 10px; } </style>
    <body>
        <div id="tab1">
            <span class="active">最新新闻</span>
            <span>行业新闻</span>
        </div>
    
       <div id="item1">
         <ul>
           <li>最新新闻</li>
           <li>最新新闻</li>
           <li>最新新闻</li>
           <li>最新新闻</li>
           <li>最新新闻</li>
         </ul>
         <ul style="display:none">
           <li>行业新闻</li>
           <li>行业新闻</li>
           <li>行业新闻</li>
           <li>行业新闻</li>
           <li>行业新闻</li>
         </ul>
       </div>
    </body>
    <script src="app.js"></script>
    </html>

页面打开 如图所示：  
![这里写图片描述][70]

这里样式不是重点 ， 我就不美化了 ！

**app.js 文件**  
1 ： 先 写个构造函数 tab

// options 为一个对象
    function Tab(options) {
      this.id = document.getElementById(options.id);
      this.idChild = this.id.getElementsByTagName(options.idChild);
      this.passiveId = document.getElementById(options.passiveId);
      this.passiveChild = this.passiveId.getElementsByTagName(options.passiveChild);
      this.events = options.events
      this.init(); // 初始化方法
    }

2 : 为 tab 添加原型方法

Tab.prototype = {
    
      init:function() { 
        // 初始化
        var _this = this;
        for (var i = 0; i < this.idChild.length; i++) {
          this.idChild[i].index = i;
          this.idChild[i][this.events] = function(){ 
            _this.change(this.index);
          }
    
        }
      },
      change:function(i){ 
        for (var j = 0; j < this.passiveChild.length; j++) {
          this.passiveChild[j].style.display = 'none';
          this.idChild[j].className = '';
        }
    
       this.passiveChild[i].style.display = 'block';
        this.idChild[i].className = "active";
    
      }
    
    };

最后 ： 我在需要用的时候 ， 直接实例化 这个构造函数 即可 ！

new Tab({ id:"tab1", idChild:"span", passiveId:"item1", passiveChild:"ul", events:"onmouseover" // onclick 点击事件 })

PS : 实例化对象 参数可自行更改 ！

[70]: /images/20210813/01b2119fa90943b1a9d585e42b02f705.png