Tab切换类Lix Tabs 0.1发布

近期正在做的这个网站中，有的页面同时会出现好几个tab切换效果。在没有写这个类之前，每碰到多一个TAB我就得复制一遍tab函数，关键是这函数其实功能与前几个没什么两样。但不复制又不行，因为那tab函数是没法重用的。每当做到这里，都让我苦不堪言。

在博客园上参观了几位牛人的javascript实例后，我就开始琢磨着写这么一个类。这是否能叫类呢，我也不确定，不过确定能用就行了。修修改改用了两周+的时间，发现好像没什么bug了，于是发布出来，斗胆加上个自己的代号吧。顺便放出源码供新人参考，高手看了也不要批我，我真的是新手。

功能与示例：

可以实现同一页面N个tab切换（n>0）,效果可参考网易首页的那一整篇tab菜单,或点击查看示例页

Lix Tabs的源码:

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

var $id=function(id){         return (typeof id == "Object") ? id : document.getElementById(id);     };     var $$=function(tag,elm){         return elm.getElementsByTagName(tag);     };     var $C=function(cn,tag,elm){         if(!tag) tag='*';         var ts = $$(tag,elm);         var classArr = [];         var filter = new RegExp("(^|\\s)"+cn+"(\\s|$)");         for(var i=0,l=ts.length;i<l;i++){             if(filter.test(ts[i].className)){                 classArr.push(ts[i]);             }         }         return classArr;     }     var cutover=function(arr,cur,c1,c0){         for(var i=0,l=arr.length;i<l;i++){             arr[i].className = (i ==cur) ? c1 : c0;         }     }           var Tabs = function (elm){         if(elm == null){return false;}         var t=this;         /*开始缓存传入参数*/         t.hdtag =arguments[1].hdtag || t.items.hdtag;         t.hdcn =arguments[1].hdcn || t.items.hdcn;         t.hdtagcur =arguments[1].hdtagcur || t.items.hdtagcur;         t.hdtagno =arguments[1].hdtagno || t.items.hdtagno;         t.bdtag =arguments[1].bdtag || t.items.bdtag;         t.bdcn =arguments[1].bdcn || t.items.bdcn;         t.bdtagcur =arguments[1].bdtagcur || t.items.bdtagcur;         t.bdtagno =arguments[1].bdtagno || t.items.bdtagno;         /*缓存参数完成*/                   t.tabhd = $C(t.hdcn,t.hdtag,elm)[0];         t.tabtag = t.tabhd.children;         t.tabbd = $C(t.bdcn,t.bdtag,elm)[0];         t.tabcon = t.tabbd.children;                             t.now = 0;         t.time =arguments[1].auto;         t.sum = t.tabtag.length;         if(t.sum != t.tabcon.length) {             alert('Tab标签个数与内容个数不匹配');             return true;         }         (function(){                           for(var i=0;i<t.sum;i++){                 t.tabtag[i].to = i;                 t.tabtag[i].onmouseover = function(){                     t.now = this.to;                     t.change();                 }             }         })();                   if(t.time) {             function go(){                 t.change();                 t.now = (t.now == t.sum-1) ? 0 : t.now+1;                 t.run =setTimeout(arguments.callee,t.time);             };             go();             elm.onmouseover = function(){clearTimeout(t.run);}             elm.onmouseout = function(){t.run =setTimeout(go,t.time);}         }                         }           Tabs.prototype = {         items:{             hdtag:'DIV',             hdcn:'tabhd',             hdtagcur:'cur',             hdtagno:'',             bdtag:'DIV',             bdcn:'tabbd',             bdtagcur:'cur',             bdtagno:''         },         change:function(){             cutover(this.tabtag,this.now,this.hdtagcur,this.hdtagno);             cutover(this.tabcon,this.now,this.bdtagcur,this.bdtagno);         }     };

Lix Tabs的说明:

1,基本说明:

有默认参数如下:

?

items:{

    hdtag:'DIV',//tab头的标签

    hdcn:'tabhd',//tab头的className

    hdtagcur:'cur',//tab头中当前标签的className

    hdtagno:'',//tab头中非当前标签的className

    bdtag:'DIV',//tab内容区的标签

    bdcn:'tabbd',//tab内容区的className

    bdtagcur:'cur',//tab内容区中当前标签的className

    bdtagno:''//tab内容区中非当前标签的className

}

绕晕了?实例对照:

?

<div class="inner" id="tabLite">

        <div class="tabhd"><a class="cur" title="" href="#">城市指数</a><a title="" href="#" class="">名牌指数</a><a title="" href="#" class="">网上百货</a></div>

        <div class="tabbd">

            <div class="cur">

            <ul>

                <li>·<a title="" href="#">0上海起火楼工程多萨斯附属卡</a></li>

                <li>·<a title="" href="#">损失达5亿 忠犬不吃了快速扩大解放</a></li>

            </ul>

            </div>

            <div class="">

            <ul>

                <li>·<a title="" href="#">1上海起火楼工程多</a></li>

                <li>·<a title="" href="#">损失达5亿 忠犬不吃</a></li>

            </ul>

            </div>

            <div class="">

            <ul>

                <li>·<a title="" href="#">2上海起火楼工程多</a></li>

                <li>·<a title="" href="#">损失达5亿 忠犬不吃</a></li>

            </ul>

            </div>

        </div>

    </div>

2,使用指南：

Lix Tabs有三个重要的外置函数,即$id=>getElementById,$$=>getElementsByTagName,$C=>getElementsByClassName...具体请看源码

有一个必需参数,就是到底是哪个HTML对象要切换(注:参数是html对象而不是字符串!)

调用：

参数默认时:var t1 = new Tabs($id('t1'));（划线位置即是一个通过$id得到的HTML元素）

自传参数:

?

var t1=new Tabs($id('blog'),{hdcn:'tab-hd',hdtagcur:'tab-u current',hdtagno:'tab-u',bdcn:'tab-bd',bdtagcur:'current',bdtagno:'tab-con',auto:4000});

注:auto的值就是自动切换的间隔时间,如果不想自动切换,不传auto即可.

如果tab太多，那像上面那样一个一个new无疑太麻烦了。这时也可批量定义，给需要tab的地方都加上一个共同的class吧：

?

/* 批量定义 */<br>        var as = $C('as','DIV',document);

    for(var i=0,l=as.length;i<l;i++){

        as[i].tab = new Tabs(as[i],{hdtag:'UL',hdcn:'sn',hdtagcur:'now',bdcn:'imgs',bdtagcur:'cur',auto:2000});

    }

注:批量定义适于类似网易首页的多tab结构甚至CSS都相同的情况.

容错能力:

只对最常见的错误--Tabs(elm)的elm拼错了而导致找不到HTML对象--有容错能力,Tabs会忽略这个错误,所以不会影响后续调用.

Lix Tabs的优缺点:

优点:代码少,纯代码大概2.3K;可批量应用;可设置是否自动切换;自动识别tab标签个数...貌似没了

缺点:切换无过渡特效,一点也不炫;也许有暂未发现的效率问题;也许源代码不够优化;参数也许有点多...

已知问题：在得到tab元素时使用的是children而非childNodes，所以不符合W3C标准。。。有w3c强迫症的人群慎用

完整实例下载：点击下载

lix tabs最新版：点击查看0.2

----------------------------------------------------------------------------------

结语:Lix Tabs是个功能非常简单的JS类,所以尽量精简.这次发布的是0.1版,如果以后我的JS水平提高了,肯定会改进+优化,但应该不会添加过渡特效...

以下内容可无视:

感叹几句,我的JS水平真差,不说别的,博客园上的JS文章我只有很少能看懂的;JS真的有点难;好想面对面向高手们学学;最后,活着真不容易,拿着3000不到的工资,还要养老婆,我擦