js最近做一个tabs切换的,需要嵌套,共享之
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>例1:[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>例2:[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>
效果:
例1:[tab0z93]
- click1
- click2
- click3
- show1
例2:[tab0z94],嵌套,[tab0z95](show2里的click3和click2可以换位置)
- show1
- show2
- show3
-
show2
- click1
- click3
- click2
show3
新版本参见 :http://www.cnblogs.com/ijunxiong/articles/8202746.html