Navegación


 Publicaciones en línea


 Volver al foro

MisPruebas   

[Tutorial] Tabs manual y automatico

Admin | Publicado dom Sep 09, 2018 8:50 am | 2 Vistos

Código HTML

<div id="my_tabs">       
    <div id="tabs_titles">      
        <div  >Titulo 1</div>	 
        <div  >Titulo 2</div>
        <div  >Titulo 3</div>
        <div  >Titulo 4</div>
    </div>
    <div id="tabs_contents">    
        <div  >Contenido 1</div>    
        <div  >Contenido 2</div>
        <div  >Contenido 3</div>
        <div  >Contenido 4</div>  
    </div>   
</div>

Código Javascript:

var tiempo = 5000;
var indice = 1;
var timer = setInterval(mistabs, tiempo);

var a = document.getElementsByClassName('my_tab_seccion');
var b = document.getElementsByClassName('my_tab_title');

a[0].style.display = "block";
b[0].classList.add("active");

for(var i = 0; i < b.length; i++){
    b[i].addEventListener("click", function(){
        my_tabs(this);
    });
}

function my_tabs(element){
    for(var i = 0; i < b.length; i++){
  	if(element.innerHTML == b[i].innerHTML){ 
    	    a[i].style.display = "block";
    	    element.classList.add("active");
            indice = i == b.length-1 ? 0 : i+1;
        } else {
    	    a[i].style.display = "none";
            b[i].classList.remove("active");
        }
    }
    
    clearInterval(timer);
    timer = setInterval(mistabs, tiempo);
}


function mistabs(){
    if(indice == a.length) indice = 0;
    
    for(var i = 0; i < a.length; i++){
  	if(i == indice){ 
            a[i].style.display = "block";
    	    b[i].classList.add("active");
        } else {
    	    a[i].style.display = "none";
            b[i].classList.remove("active");
        }
  
    }
    
    indice++;
}
Sobre el Autor