2019-05-08

原生js的选项卡模板

var btns = document.querySelectorAll("#tab-list div");
var contents = document.querySelectorAll("#container-list div");
//清除active的函数 removeClass
function removeClass(dom, className) {
        var classString = dom.className;
        var arr = classString.split(" ");
        var index = arr.indexOf(className);
        if (index !== -1) {
                var result = arr.splice(index, 1);
                console.log(result)
        }
        dom.className = arr.join(" ");
}
// 事件处理函数完全去this;
for (var i = 0; i < btns.length; i++) {
        // btns[i].setAttribute("data-index",i);
        // btns[i]["index"] = i;
        (function () {
                // btns[i].index = i;
                var j = i;
                btns[j].onmouseover = function () {
                        for (var i = 0; i < btns.length; i++) {
                                removeClass(btns[i], "active");
                                removeClass(contents[i], "active");
                        }
                        // var index = btns[i].index;
                        btns[j].className += " active";
                        contents[j].className += " active";
                }
        })()
}