js最近做一个tabs切换的，需要嵌套，共享之

最新推荐文章于 2022-06-25 23:28:29 发布

weixin_30256505

最新推荐文章于 2022-06-25 23:28:29 发布

阅读量119

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ijunxiong/articles/8043292.html

版权

jntabs.js

//jntabs.js说明
//      2017.12.15, 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"; 在这句改，
function jntabs(classid, i_show) {
    var cssTabActive = "tabActive";
    i_show = i_show || -1;
    var hrels = $("*[hrel^='" + classid + "-']");
    var brels = $("*[brel^='" + classid + "-']");
    var t1p1 = function () {
        var o0 = this;
        hrels.each(function (i) {
            var hrel = $(this).attr("hrel");
            if (o0 == this) { $(this).addClass(cssTabActive); brels.filter("[brel='" + hrel + "']").css("display", ""); }
            else { $(this).removeClass(cssTabActive); brels.filter("[brel='" + hrel + "']").css("display", "none"); }
        });
    }
    if (i_show == -1) hrels.each(function (i) { if ($(this).hasClass(cssTabActive)) i_show = i; });
    i_show = i_show == -1 ? 0 : i_show;
    hrels.each(function (i) {
        var hrel = $(this).attr("hrel");
        if (i == i_show) { $(this).addClass(cssTabActive); brels.filter("[brel='" + hrel + "']").css("display", ""); }
        else { $(this).removeClass(cssTabActive); brels.filter("[brel='" + hrel + "']").css("display", "none"); }
        $(this).click(t1p1);
    });
}

　　jntabs-demo1.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jntabs-demo1</title>
    <script src="static/js/jquery-1.7.2.min.js"></script>
    <script src="static/js/jntabs.js"></script>
    <meta charset="utf-8" />
</head>
<body>
    <style>
        .head0 li {color: blue;}
        .head0 .tabActive {color: red;}
    </style>
    <div>
        <div>例１：[tab0z93]</div>
        <ul class="head0">
            <li hrel="tab0z93-1">click1</li>
            <li hrel="tab0z93-2">click2</li>
            <li hrel="tab0z93-a">click3</li>
        </ul>
        <ul>
            <li brel="tab0z93-1">show1</li>
            <li brel="tab0z93-2">show2</li>
            <li brel="tab0z93-a">show3</li>
        </ul>
    </div>
    <hr />
    <div>
        <div>例２：[tab0z94],嵌套,[tab0z95]（show2里的click3和click2可以换位置）</div>
        <ul class="head0">
            <li hrel="tab0z94-1">show1</li>
            <li hrel="tab0z94-2">show2</li>
            <li hrel="tab0z94-a">show3</li>
        </ul>
        <ul>
            <li brel="tab0z94-1">show1
            </li>
            <li brel="tab0z94-2">
                <h2>show2</h2>
                <ul class="head0">
                    <li hrel="tab0z95-1">click1</li>
                    <li hrel="tab0z95-a" class="tabActive">click3</li>
                    <li hrel="tab0z95-2">click2</li>
                </ul>
                <div>
                    <div>
                        <div brel="tab0z95-1">show1</div>
                        <div brel="tab0z95-2">show2</div>
                        <div><div brel="tab0z95-a">show3</div></div>
                    </div>
                </div>
            </li>
            <li brel="tab0z94-a">show3</li>
        </ul>
    </div>
    <script>
        new jntabs("tab0z93");
        (function () {
            //new jntabs("tab0z94");
            new jntabs("tab0z94", 1);//使用,i_show=1显示第2个标签，或直接在hrel标签对应设置class="tabActive",//有冲突时，使用初始化时,i_show=1有效
            new jntabs("tab0z95");
        })();
    </script>
</body>
</html>

效果：

例１：[tab0z93]