Tab切换

// (8)扩展 -tab切换
            //面向对象tab切换
            //Tab切换一般要的是 标题的集合 和内容的集合
            function Tab(oTitles, oCons) {
                this.oTitles = oTitles;
                this.oCons = oCons;
                var _this = this;
                this.oTitles.forEach(function (item, index) {
                    item.onclick = function () {
                        //所有tab切换的标题点击以后，执行的动作是一致的 所以可以把动作放在原型对象上
                        //在这里 index就是对应当前点击元素的下标
                        _this.click(index);
                    }
                })
            }
            Tab.prototype.click = function (index) {
                var _this = this;
                //先清空所有样式
                this.oTitles.forEach(function (item, index) {
                    item.classList.remove("active");
                    _this.oCons[index].classList.remove("active");
                })
                //给当前点击的元素添加
                this.oTitles[index].classList.add("active")
                this.oCons[index].classList.add("active")
            }
            //侧边栏tab
            asideTab()
            function asideTab() {
                var oTitles = document.querySelectorAll('.tabTitle h4');
                var oCons = document.querySelectorAll('.tabContent .tab-pane');
                new Tab(oTitles, oCons)
            }