选项卡插件

 1 Tabs 选项卡插件使用方法
 2 1.首先加载插件，需要用到的文件有tabs.js文件.
 3 
 4 <!DOCTYPE html>
 5 <html>
 6 <head>
 7 </head>
 8 <body>
 9     ...
10     <script src="tabs.js"></script>
11     ...
12 </body>
13 </html>
14 2.添加HTML内容。
15 <div class="box" id="tabs">
16     <ul>
17       <li class="active">1</li>
18       <li>2</li>
19       <li>3</li>
20     </ul>
21     <ol>
22       <li class="active">1</li>
23       <li>2</li>
24       <li>3</li>
25     </ol>
26   </div>
27 
28   <div class="box" id="box2">
29     <ul>
30       <li class="active">1</li>
31       <li>2</li>
32       <li>3</li>
33       <li>4</li>
34     </ul>
35     <ol>
36       <li class="active">1</li>
37       <li>2</li>
38       <li>3</li>
39       <li>4</li>
40     </ol>
41   </div>
42 
43 3.初始化Tabs。
44 
45 <script>        
46   var myTabs = new Tabs ('#tabs', {
47     type: 'mouseover'
48   })        
49   </script>
50 4.完成。恭喜你，现在你的tabs选项卡应该已经能正常切换了。

tabs.js 文件内容

 1 function Tabs(id, options) {
 2     // 注意：构造函数中的this指向实例对象p1
 3     // 1. 获取页面元素
 4     this.ele = document.querySelector(id)
 5     this.btns = this.ele.querySelectorAll('ul li')
 6     this.conts = this.ele.querySelectorAll('ol li')
 7     this.options = options || {}
 8     // 2. 调用init方法
 9     this.init()
10 }
11 // init: 实现选项卡切换
12 Tabs.prototype.init = function () {
13     // 注意：这里的this指向方法的调用者p1
14     // 2. 循环并给按钮绑定点击事件
15     for (let i = 0; i < this.btns.length; i++) {
16         // 这里普通函数的this指向的是事件的绑定者
17         // this.btns[i].addEventListener('click', function () {
18         //   console.log(this);
19         //   // 排他思想干掉所有
20         // })
21         // 注意：箭头函数的this指向该函数声明时所处的作用域：实例对象p1
22         this.btns[i].addEventListener(this.options.type || 'click', () => {
23             // 排他思想：
24             // 2.1 先干掉所有
25             for (let j = 0; j < this.btns.length; j++) {
26                 this.btns[j].classList.remove('active')
27                 this.conts[j].classList.remove('active')
28             }
29             // 2.2 给当前设置
30             this.btns[i].classList.add('active')
31             this.conts[i].classList.add('active')
32         })
33     }
34 }