js批量添加事件监听，用于处理tab标签选中的一个示例

之前每次网上找的好看的控件都不知道如何切换标签，因为通常提供的都是html，需要自己写js，无从下手，本次通过自己的理解学会了一个tab页面的激活与取消（简单的方法，以前的方法很笨拙），通过js遍历添加事件监听的方式，无论你有多少个tab页面都无需修改js了，自动适应。

例子是使用了SUI的一个工具栏，提供了3个按钮，自己给了3个tab content与之一一对应，通过点击工具栏的按钮实现工具栏指定按钮激活与tab content的激活。

html代码如下：

  <!-- 工具栏 -->
            <nav class="bar bar-tab" id="tool_bar_id">
                <a class="tab-item external active" href="#" id="tab-item-1" name ="tab1">
                    <span class="icon icon-home"></span>
                    <span class="tab-label">实时数据</span>
                </a>
                <a class="tab-item external" href="#" id="tab-item-2" name ="tab2">
                    <span class="icon icon-star"></span>
                    <span class="tab-label">历史数据</span>
                </a>
                <a class="tab-item external" href="#" id="tab-item-3" name ="tab3">
                    <span class="icon icon-settings"></span>
                    <span class="tab-label">图片列表</span>
                </a>
            </nav>

            <!-- 这里是页面内容区 -->
            <div class="content-block">
                <div class="tabs" id="tab_content_id">
                  <div id="tab1" class="tab active">
                    <div class="content-block">
                      <p>This is tab 1 content</p>
                    </div>
                  </div>
                  <div id="tab2" class="tab">
                    <div class="content-block">
                      <p>This is tab 2 content</p>
                    </div>
                  </div>
                  <div id="tab3" class="tab">
                    <div class="content-block">
                      <p>This is tab 3 content</p>
                    </div>
                  </div>
                </div>
              </div>

js如下（原理通过注释写的比较清楚）：

 var obj = document.getElementById('tool_bar_id');       //获取工具栏整个对象
                var tab_item = obj.querySelectorAll('.tab-item');       //选取含tab-item样式的对象集合
                var TabArray = Array.prototype.slice.call(tab_item,0);  //获取tab标签集合

                TabArray.forEach(function (e1) {                        //遍历
                    //console.log(e1.className);
                    e1.onclick = function(event)                        //为当前对象添加点击事件-为工具栏图标添加点击事件
                    {
                        var obj = document.getElementById('tool_bar_id'); //首先获取工具栏整个对象
                        var tab_item = obj.querySelectorAll('.tab-item');   //选取含tab-item样式的对象
                        var tabs_obj = document.getElementById('tab_content_id'); //获取tab页面content对象
                        var tab_content = tabs_obj.querySelectorAll('.tab'); //选取含tab样式的对象集合
                        for (var i = 0; i < tab_item.length; i++)           //循环处理所有按钮与content（按钮与content要一一对应）
                        {
                            if (event.currentTarget.id == tab_item[i].id)       //找到了当前选择的按钮id，则激活按钮与对应的content
                            {
                                tab_content[i].classList.add('active'); //激活content
                                tab_item[i].classList.add('active');    //激活按钮
                            }
                            else
                            {
                                tab_content[i].classList.remove('active');//移除激活状态
                                tab_item[i].classList.remove('active');//移除激活状态
                            }
                        }
                    }
                });

最终效果如下：

点击按钮1

点击按钮2

点击按钮3