[Aporte] EasyTabs

[pato12]

Hola,
hice hace unos dias este codigo para hacer tabs facilmente (estaba aburrido ) y un amigo justo me pregunto como hacer y se lo pase y le gusto. Ahora lo posteo para el que lo nesesita.

Código javascript:

var EasyTabs=(function(ele,actived){
        var el=document.getElementById(ele);
        var links=[];
        var dom=el.getElementsByTagName('a');
        for(var i=0;i<dom.length;i++){
            var uid=(((dom[i].getAttribute('href'))).split('#'))[1].replace('#','');
            links.push(uid);
            if(dom[i].parentNode.getAttribute('actived')=="true"){
                dom[i].parentNode.className+=(dom[i].parentNode.className?' ':'')+actived;
                document.getElementById(uid).style.display='block';
            }else{
                document.getElementById(uid).style.display='none';
            }
            dom[i].onclick=function(){
                domLi=el.getElementsByTagName('li');
                idA=(((this.getAttribute('href')).split('#'))[1].replace('#',''));
                for(var j=0;j<domLi.length;j++){
                    domLi[j].className=this.className.replace(new RegExp("(^|\\s+)"+actived+"(\\s+|$)"), ' ');
                }
                this.parentNode.className+=(this.parentNode.className?' ':'')+actived;
                for(var i=0;i<links.length;i++){
                    document.getElementById(links[i]).style.display='none'
                }
                if(document.getElementById(idA))
                    document.getElementById(idA).style.display='block';
                return false;
            };
            dom[i].onfocus=function(){this.blur();};
        }
});
// EasyTabs('ID DE LOS TABS','NOMBRE DE LA CLASS CUANDO ESTA ACTIVADA');
 

Modo de uso:

Código html:

<ul class="tabs" id="tabs">
    <li actived="true"><a href="#t1">Tab uno</a></li>
    <li><a href="#t2">Tab dos</a></li>
    <li style="float:right;"><a href="#t3">Tab tres derecha</a></li>
</ul>
<div class="contendio">
    <div id="t1">Tab numero uno</div>
    <div id="t2">Tab numero dos</div>
    <div id="t3">Tab numero tres derecha</div>
</div>
<!-- SE PONE actived="true" AL TAB ACTIVADO -->
<!-- EN EL href SE PONE EL ID DEL TAB A MOSTRAR (CON EL # AL PRINCIPIO) -->
 

y el code js:

Código javascript:

EasyTabs('tabs','actived');
 

DEMO: http://www.halfmusic.com/easytabs.html

Salu2