this是怎么使用的呢，比如代码可以用几次

Question

想要重复使用选项卡代码

    function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
        var tabs = document.querySelectorAll(tabs_name),
            contents = document.querySelectorAll(contents_name),
            e_mark = 0;
        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].num = i;
            tabs[i].onclick = function() {
                tabs[e_mark].classList.toggle(tabs_checked_style);
                tabs[this.num].classList.toggle(tabs_checked_style);
                contents[e_mark].classList.toggle(contents_checked_style);
                contents[this.num].classList.toggle(contents_checked_style);
                e_mark = this.num;
            };
        }
    }
    function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
        var tabs = document.querySelectorAll(tabs_name),
            contents = document.querySelectorAll(contents_name),
            e_mark = 0;
        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].num = i;
            tabs[i].onclick = function() {
                tabs[e_mark].classList.toggle(tabs_checked_style);
                tabs[this.num].classList.toggle(tabs_checked_style);
                contents[e_mark].classList.toggle(contents_checked_style);
                contents[this.num].classList.toggle(contents_checked_style);
                e_mark = this.num;
            };
        }
    }

    window.onload = function onemain() {
        Tabs("X", ".contents-X",
            "X-checked", "content-X-checked");
    }
    window.onload = function main() {
        Tabs(".Y", ".contents-Y",
            "Y-checked", "content-Y-checked");
    }

应该怎么改呢

Answer 1

    function Tabs(tabs_name, contents_name, tabs_checked_style, contents_checked_style) {
        var tabs = document.querySelectorAll(tabs_name),
            contents = document.querySelectorAll(contents_name),
            e_mark = 0;
        for (var i = 0, len = tabs.length; i < len; i++) {
            tabs[i].num = i;
            tabs[i].onclick = function() {
                tabs[e_mark].classList.toggle(tabs_checked_style);
                tabs[this.num].classList.toggle(tabs_checked_style);
                contents[e_mark].classList.toggle(contents_checked_style);
                contents[this.num].classList.toggle(contents_checked_style);
                e_mark = this.num;
            };
        }
    }
    window.onload = function onemain() {
        Tabs("X", ".contents-X",
            "X-checked", "content-X-checked");
        Tabs(".Y", ".contents-Y",
            "Y-checked", "content-Y-checked");
    }