基于OO的tab选项卡，加强了语言话和扩展性需特效可合并前面的附加插件用

来源：互联网发布：入我相思门知我相思苦编辑：程序博客网时间：2024/05/17 23:46

前言：前段时间一直都好忙也就好久没有写些东西了，最近手上的事刚好告些段落了，把以前空写的写插件都拿出来分享下吧，希望对大家有些帮助，也希望有高手能帮忙指点下我的写不足和错误，一直以来自己写的东西都是在用，性能方面个人只能尽量靠近问题还很多……真心求指点；

插件简介：用于tab选项卡，这个东西网上也很多不过网上的普遍都是ul然后内容是div个人感觉这样的结构不便于语义化，而且当没有js和css 的时候整个页面就无可读性，所以重写的一个大家可以看看

使用方法：在下面的js代码里面前面写了，大家可以看看直接复制粘贴就可以用了有问题可以联系我

JS代码如下，这js代码里面有个查找class的，其实这个东西我之所以没合并进去因为查找class的本身就应该单独做个类是用，demo事例在下面

/** //class查找function _class(c,o){    var oDom = o?o:document,cParent = oDom.getElementsByTagName("*"),classAry = [],leng = cParent.length;    while(leng--){        var allC = cParent[leng].className,word = allC.split(" "),len=word.length;        while(len--) word[len]==c&&classAry.push(cParent[leng])    }    return classAry.length==1?classAry[0]:classAry;}/** * User: liuxing * Date: 12-9-22 * Time: 下午2:02 * 用途：用于tab选项卡切换 * 用法：传入一个对象，对象包含5个默认参数， * 第一个为：element tab触发的节点此参数为数组，第一个为需要查找的class类，第二个这个class类的查找范围ID * 第二个为：childTag 切换内容的子类容标签 * 第三个为：parentTag 触发tab的节点 * 第四个为：evenSort 触发事件的方式 * 第五个为：curClass 给当前元素添加的当前类名 */function Tab(){this.init.apply(this,arguments);}Tab.prototype = {    init:function(o){        if(Object.prototype.toString.apply(o)!=='[object Object]') return;        this.set(o);        var e = this.s.element,len = e.length;        if(len>0){            var tabArea = _class(e[0],e[1]);            var leng = tabArea.length            do{this.even(tabArea[leng]||tabArea)}while(leng--);        }    },    set:function(o){        this.s = {            element:null,            childTag:"dd",            parentTag:"dt",            evenSort:"mouseover",            curClass:"cur"        }        for(var c in o) this.s[c] = o[c];    },    even:function(source){        var _this = this;        if(source.attachEvent){            source.attachEvent("on"+this.s.evenSort,function(even){_this.fun(source,even)})        }else if(source.addEventListener){            source.addEventListener(this.s.evenSort,function(even){_this.fun(this,even)},false)        }    },    fun:function(self,even){        var e = even || window.event,target = e.target || e.srcElement,tagName,chidArea;        while(target!=self&&tagName!=this.s.parentTag){            tagName = target.nodeName.toLowerCase();            tagName!=this.s.parentTag&&(target = target.parentNode);        }        if(tagName==this.s.parentTag){            chidArea = self.getElementsByTagName(this.s.childTag);            var j= 0,leng = chidArea.length,allEle = self.getElementsByTagName(target.nodeName),curIndex = this.getIndex(target,allEle);            if(allEle.length!==leng) return;            if(target.className.indexOf(this.s.curClass)<0){                for(;j<leng;j++) curIndex===j?(target.className+=" "+this.s.curClass,chidArea[j].style.display="block"):(allEle[j].className=allEle[j].className.replace(this.s.curClass,""),chidArea[j].style.display="none");            }        }    },    getIndex:function(o,a){        var len = a.length,i=0;        for(;i<len;i++) if(o===a[i]) return i;    }}

html demo如下：

<!DOCTYPE html><html><head>    <title>TAB选项卡示例</title>    <style>        dl,dt,dd{padding:0;margin:0;font:12px/1.3 'tahoma,geneva,sans-serif';}        a:link,a:visited{text-decoration:none}        .tab-bx{overflow:hidden;zoom:1;position:relative;padding-bottom:268px;width:333px}        .tab-bx dt{position:relative;z-index:10;float:right;display:inline;height:32px;font:14px/32px 'Microsoft YaHei';color:#4d0101;padding:0 5px;cursor:pointer;}        .tab-bx dt.cur{border:1px solid #882220;border-bottom:none;background-color:#770301;color:#ebd39d;}        .tab-bx dd{display:none;position:absolute;left:0;top:32px;z-index:5;border:1px solid #882220;background:#4d0101;padding:14px 15px 5px;width:301px;}        .tab-bx dd a{display:inline;float:left;width:60px;height:25px;line-height:25px;text-align:center;color:#d04343;margin-bottom:6px;overflow:hidden;}        .tab-bx dd .cur{background-position:-104px -91px;}    </style></head><body><dl class="tab-bx">    <dt>预告</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>        <a href="#">第13集</a>        <a href="#">第14集</a>        <a href="#">第15集</a>        <a href="#">第16集</a>    </dd>    <dt>花絮</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd>    <dt>粤语</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd>    <dt class="cur">国语</dt>    <dd style="display:block;">        <a class="cur" href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd></dl><dl class="tab-bx">    <dt>预告</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>        <a href="#">第13集</a>        <a href="#">第14集</a>        <a href="#">第15集</a>        <a href="#">第16集</a>    </dd>    <dt>花絮</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd>    <dt>粤语</dt>    <dd>        <a href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd>    <dt class="cur">国语</dt>    <dd style="display:block;">        <a class="cur" href="#">第01集</a>        <a href="#">第02集</a>        <a href="#">第03集</a>        <a href="#">第04集</a>        <a href="#">第05集</a>        <a href="#">第06集</a>        <a href="#">第07集</a>        <a href="#">第08集</a>        <a href="#">第09集</a>        <a href="#">第10集</a>        <a href="#">第11集</a>        <a href="#">第12集</a>    </dd></dl><script src="tab.source.js"></script><script>    !function(){        //tab        var tabMenu = new Tab({element:["tab-bx"]});        tabMenu = null;    }();</script></body></html>

PS:要吃饭啦，下午还有事忙今天发了几个有点偷懒了，下午就不发了以后空了继续分享些，这些质量都还不理想