天天看点

javscript实现tab切换页(完整版),传入1-4个参数

function tab(titleId, palId, event, on) {
    // 获取面板标题的父级
    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 (on == undefined) {
        on = "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;
            // 设置面板的切换
            if (palId != undefined) {
                for (var x = 0; x < pals.length; x++) {
                    // 先将所有面板隐藏
                    pals[x].style.display = "none";
                }
                // 显示当前触发事件的面板标题对应的面板
                pals[this.index].style.display = "block";
            }
        }
    }
}      

继续阅读