estoy haciendo un programa el cual me permita cambiar de div cuando le doy click a un radio button (día de la semana) y que me aparezca la sección de ese día, y que cuando le de click a otro día se desaparezca esa sección y me aparezca la de ese día.
Como puedo quitar una clase y que se me coloque otra en otro div cuando doy click en un radio button
1 respuesta
Parece que puede funcionar con solo añadir eventos. La idea es que cada btoón tenga un evento click, que llamará a la función que se encargue de rellenar los cuadros correspondientes. A modo de ejemplo te pongo esto
var dia= document.getElementById('lunes');
dia.addEventListener('click', function(){
var vid = document.querySelector('.video1 .video');
vid.innerHTML ='<div style="color:white">Aquí el video</div>';
})
Con este código verás que al presionar en el botón del lunes, en el cuadro de calentamiento aparece la frase "Aquí el video" en blanco. Lo he puesto así para que se vea sobre el negro. Eso puede ser el código html que desees.
Supongo que tendrás un almacenamiento con las tareas de los entrenamientos o los videos. Es cuestión de leer los datos que necesitas y volcarlos en cada cuadro (calentamiento, entrenamiento, estiramiento).
Esta es la idea básica para rellenar los elementos tipo lista (li) y los cuadros de video.
Por ejemplo para los videos podrías poner en en cada cuadro el código del video sin el argumento src
<video id="videocalentamiento" width="320" height="240" src="" controls>
Y en la función del evento podrias rellenar el argumento src
var vid = document.getElementById('videocalentamiento');
vid.src = "origenvideo.mp4"
Algo similar con la lista. A partir de estas ideas creo que serás capaz de completar la aplicación.