Menu de pestañas

Este script se va a encargar de mostrar las fichas de cada curso una por una. Es como si las fichas estuvieran apiladas unas sobre otras, y al pulsar una pestaña se muestra su ficha.

Presenta una serie de botones en linea y al pulsar un botón cambia la ficha visible a la seleccionada y al mismo tiempo se resalta la pestaña que está pulsada, para identificar cual es el botón activo, el correspondiente a la ficha visible en el momento.

Por una cuestión de simplicidad los manejadores de eventos click para los botones los asigno directamente en el código HTML. Como ejercicio puedes modificar la página para hacerlos mediante código.

No se utilizan efectos, pero podríamos hacer aparecer la ficha de forma animada con una propiedad transition junto a otras como opacity, translate, left, height.

El código javascript

Cada botón lleva su evento onClick asignado medioante HTML. El controlador es la función mostrarCurso() que recibe como parámetro el identificador de la ficha de curso a mostrar.

<div class="celdas activo" onclick="mostrarCurso('c1')">HTML</div

.....

En la página web puedes ver este código que asigna el controlador mostrarCurso() al botón, en este caso el botón es el del curso HTML cuya ficha llava como identificador id="c1".

function mostrarCurso(idAct) {
var btnNue = event.currentTarget
var visNue = document.getElementById(idAct);
//padre es el bloque que contiene todas las fichas
var padre = btnNue.parentElement.parentElement;
var visAnt = padre.querySelector(".visible");
var btnAnt = padre.querySelector(".activo");
btnAnt.classList.toggle('activo');
visAnt.classList.toggle('visible');
btnNue.classList.toggle('activo');
visNue.classList.toggle('visible');
}

El script se base en cambiar las clases de las fichas implicadas.

Quitar la clase activo al botón de la clase mostrada (btnAnt)
Quitar la clase visible a la ficha actualmente mostrada (visAnt)
Poner la clase activo al botón recién pulsado (btnNue)
Poner la clase visible a la ficha correspondiente al boton actual (visNue)

Se detecta la ficha actualmente visible y el botón correspondiente mediante el método querySelector(), podemos usar este método porque solo hay una ficha con la clase visible y un botón con la clase activo. El método se aplica en el bloque llamado padre, el que contiene todas las fichas y botones.

Una vez localizados se trata de quitarles esa clase de la lista de clases de esos elementos y poner la clase activo el nuevo botón (el que recibió el evento event.currentTarget) y visible a la ficha cosrrespondiente cuyo id viene como argumento.

Como todo en programación existen otras formas de gestionar este evento, pero creo que este es el más simple y más didáctico por lo sencillo que es de seguir su funcionamiento.