(jntabs.js v1.2)js最近做一个tabs切换的，需要嵌套，共享之（新支持异步事件）-CSDN博客

//jntabs.js说明
//      v1.2, 2018.1.4, ijunxiong@126.com ,最近的tabs需要嵌套,做了一个,共享之
//      还需要改：提取出更多的共用成员，
//
//      引用:jquery, (注: demo使用jquery-1.7.2.min.js)
//      名词：标头，标体，标头集合，标体集合
//      
//      基于标签自定义属性 hrel, brel 及样式 tabActive(样式可改，但需同改js)
//      标头，有自定义属性 hrel；标体，有自定义属性 brel；
//      标头，使用 tabActive，改变当前样式；标体，使用 style="display:[none]"显示|隐藏
//      (重要)hrel/brel含义：　类名-尾串
//      格式说明[类名]:　字母数字下划线
//      格式说明[尾串] 　字母数字下划线
//
//      特殊说明
//      1.可以多嵌套，使用不同类名即可
//      2.不限定结构，可以跨层级等
//
//      使用说明
//      1.一个hrel，对应一个brel，如 hrel="f77-1" 对应 brel="f77-1"
//      2.hrel的减号前的串，为类名，在初始化时，需要用到，如(function () { new jntabs("f77"); })();
//      3.不使用，(function () {})();直接写  new jntabs("f77"); 初始化可以吗？　可以,风格的区别
//      4.tabActive可以改吗？可以,var cssTabActive = "tabActive"; 在这句改，
//
//settings={
//  cur: 0,
//  enter: function(jqobj, hrels, brels, index){ }
//}
//
function jntabs(classid, settings) {
    settings = settings || {};
    var parr = ["cssTabActive", "cur", "enter", "leave"];
    //var parr = ["cur", "start", "enter1", "enter2", "leave1"];
    var cssTabActive = settings[parr[0]] || "tabActive";
    //var cur = settings[parr[0]] || -1;//cur未设置,则检查有没有tabActive的样式,有就为当前
    var cur = settings[parr[1]] || -1;//cur未设置,则检查有没有tabActive的样式,有就为当前
    //var fn_start = settings[parr[1]] || null;
    //var fn_enter1 = settings[parr[2]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前
    //var fn_enter2 = settings[parr[3]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前
    var fn_enter2 = settings[parr[2]] || null;//cur未设置,则检查有没有tabActive的样式,有就为当前
    //var fn_leave1 = settings[parr[4]] || null;
    var fn_leave2 = settings[parr[3]] || null;
    var hrels = $("*[hrel^='" + classid + "-']");
    var brels = $("*[brel^='" + classid + "-']");
    if (cur == -1) hrels.each(function (i) { if ($(this).hasClass(cssTabActive)) cur = i; });
    cur = cur == -1 ? 0 : cur;//还是-1，则为0标签显示
    var tabEnter = function (setIndexShow) {//setIndexShow参数可能是事件或数字,事件就是当前控件,数字就是下标
        var o0 = this;
        var xindex = -1;
        //三种，如果未传入，传入数字，传入事件//传入事件是不需要的，因为有了this
        if (typeof (setIndexShow) == "undefined") xindex = -1;
        else if (!isNaN(setIndexShow)) xindex = setIndexShow;
        hrels.each(function (i) {
            var jqobj = $(this);
            var flag = xindex == -1 ? o0 == this : i == xindex;
            var hrel = jqobj.attr("hrel");
            if (flag) {
                jqobj.addClass(cssTabActive);
                //if (fn_enter1 != null) fn_enter1($(this), hrels, brels, i);
                brels.filter("[brel='" + hrel + "']").css("display", "");
                if (fn_enter2 != null) fn_enter2(jqobj, hrels, brels, i);
            }
            else {
                jqobj.removeClass(cssTabActive);
                if (fn_leave2 != null) fn_leave2(jqobj, hrels, brels, i);
                brels.filter("[brel='" + hrel + "']").css("display", "none");
            }
        });
    }
    tabEnter(cur);
    hrels.each(function (i) {
        $(this).click(tabEnter);
    });
}

调用：

<script>
        jntabs44 = new jntabs("tab44", {
            "cur": 2, "enter": function (jqobj, hrels, brels, index) {
                //这里定义进入tab需做的处理
            }
        });
</script>


html部分，参考之前的写的，tabs切换

转载于:https://www.cnblogs.com/ijunxiong/articles/8202746.html