Quisiera saber cómo podría hacer focus a los elementos DOM de mi página web progresivamente, es decir que haga focus es un <a>
(por ejemplo) y después de 5 segundos, hacer focus al siguiente; y así seguir con todos los elementos.
Inicialmente tenía este código (visto en internet):
function recorrido(){
$("#menu a").each(function(){
$(this).focus();
});
}
$(document).ready(function(e){
recorrido();
});
Pero ese código no me funcionaba, así que opté por darles distintas clases, pero si lo dejo con el tiempo (como se verá abajo), entonces no me cambia las clases y nada se modifica.
<section id="menu">
<a href="" id="refrescar_inicio">Inicio</a>
<a href="#estadisticas" id="mostrar_estadisticas">Estadísticas</a>
<a href="#modelo" id="mostrar_modelo">Modelo</a>
<a href="#conceptos" id="mostrar_conceptos">Conceptos</a>
<a href="" id="mostrar_como">Cómo usar</a>
<a href="" id="mostrar_blog">Ir al blog</a>
<a href="./php/registrar.html" id="enviar_registrar">Registrarse</a>
</section>
#menu{
background-color:#F5F5F5;
padding:1em;
text-align:center;
}
#menu a{
color:#000000;
font-size:20pt;
}
.focus{
outline: thick double #32a1ce;
}
function recorrido(){
$("#menu a").each(function(){
$(this).addClass('focus');
}).then(function(){
$(this).removeClass('focus')
});
}
$(document).ready(function(e){
recorrido();
});
Quisiera saber cómo podría hacer focus a todos los elementos, independiente de su etiqueta, o cómo podría agregarle una clase especial y luego de 5 segundos, quitar esa clase y ponérsela al elemento siguiente.