javascript实现tab页的切换

至少传入两个参数，第一个是面板标题的父级的ID，第二个是面板的父级的ID，另外两个参数有默认值，可以根据需要传入。需要高亮显示的类名默认用"on"，也可以根据需要传入，具体说明可看注释。
代码如下：

/*
     * tab切换页：
     * tab("面板标题的父级的ID","面板父级的ID","触发事件的类型","高亮显示的类")
     * 可以传入2-4四个参数,如果后两个参数没有传入,那么默认触发事件的类型为点击事件，默认的高亮的类请用"on",如果需要自定义高亮的类请传入第四个参数
     * 例如:tab("title","pal")
     *      tab("title","pal","onclick",on)
     */
     function tab(titleId, palId,event,style) {
        // 获取面板标题的父级
        var title = document.getElementById(titleId);
        // 获取所有面板标题
        var palTitles = title.children;
        // 获取面板父级
        var pal = document.getElementById(palId);
        // 获取所有面板
        var pals = pal.children;
        // 没有设置触发事件的类型时，默认为点击事件
        if (event == undefined) {
            event = "onclick";
        }
        // 没有设置高亮显示的类时，默认类名为"on"
        if (style == undefined) {
            style = "on";
        }
        for (var i = 0; i < palTitles.length; i++) {
            // 给每个面板标题绑定编号
            palTitles[i].index = i;
            // 给每个面板标题绑定响应函数
            palTitles[i][event] = function () {
                // 设置面板标题样式的切换
                for (var j = 0; j < palTitles.length; j++) {
                    // 先清除所有面板标题的样式
                    palTitles[j].className = "";
                }
                // 给当前点击触发事件的面板标题添加样式
                this.className = "on";
                // 设置面板的切换
                for (var x = 0; x < pals.length; x++) {
                    // 先将所有面板隐藏
                    pals[x].style.display = "none";
                }
                // 显示当前触发事件的面板标题对应的面板
                pals[this.index].style.display = "block";
            }
        }
    }