Soy un poco nuevo en la codificación. He estado trabajando en un menú de pestañas alternas durante unos días. Finalmente logré crear un menú de alternancia que permite al usuario mostrar diferentes ofertas cada vez que hace clic en un botón.

Funcionó absolutamente bien ayer. Decidí tomarme una hora de descanso de la pantalla y cuando regresé, la funcionalidad de los botones dejó de funcionar. La función de alternar no funciona. Cuando hago clic en un botón, no muestra lo que debe mostrar.

Revisé mis archivos CSS y mi archivo de índice, no hay cambios allí.

No estoy seguro de lo que sucedió, ya que funcionaba perfectamente bien antes. Tampoco apagué mi computadora. He reiniciado, etc. y he revisado mi código, línea por línea... pero aún así, no puedo encontrar un problema.

FYI: agregué algo de jquery para crear un menú desplegable móvil (vi un tutorial). El jquery se agrega en la sección de encabezado. El menú de alternancia real NO está hecho con jquery. ¿Puede ser un problema de overriding? Lo dudo, ya que mencioné que ambos funcionaban bien ayer.

¡Muchas gracias por la ayuda de antemano!

Aquí es donde he agregado la etiqueta del script:

Código JS externo:

// los botones const btns = document.querySelectorAll(".points-btn");

// el artículo div que cubre toda la sección de recompensas, es decir, el contenedor principal const about = document.querySelector(".toggle-container");

// las pestañas de recompensas individuales con la descripción de la comida y las imágenes, es decir, pestañas de recompensas div's const tabs = document.querySelectorAll(".points-tab");

// e es para acceder a mi objeto de evento

about.addEventListener("clic", función (e) {

 const id = e.target.dataset.id; // this is to target the id that I have added in the html. Each button AND each div has a dataset ID which we need to retrieve using this method // here I have set up an IF statement to say. If i am clicking on a button with the ID, I want to display a certain div with the images, description etc //"if id matches" // the id alone container all the rewards section. Ie 25 points id, 50 points, 150 points, 200points and 400 points. if (id) { // remove active from other buttons - "for each button that does not have the id that matches, remove active" //for each button - ie for every button, run this function btns.forEach(function (btns) { btns.classList.remove("active"); e.target.classList.add("active"); }); // hide the other reward tabs tabs.forEach(function (tabs) { tabs.classList.remove("active"); }); // display content with the matching id const element = document.getElementById(id); element.classList.add("active"); };

});

[Una imagen de las pestañas de alternar 4