11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai commencé un code JS, mais je bloque sur un problème. Je voudrais que lorsque je clique sur l'un des menus du menu principal, il faudrait qu'il s'affiche un texte différent dans la <section>. Sauf que pour le moment le texte ne change pas.

Aussi, je voudrais créer un sous-menu. Lorsque l'on clique sur "Mes données", deux sous-menus s'affichent ("Compte" et "Paramètres"). Lorsque l'on clique sur un autre menu (ex: "Equipes"), les sous-menu correspondant au menu s'affichent.

Voici mon code actuel : https://codepen.io/Titouan79/pen/WNNygwa

Merci d'avance Smiley smile
Il faut gérer l'évènement 'click' sur le menu
document.querySelector('ul.menus').addEventListener('click', function(event) {
  if(event.target.tagName == 'A') {
     event.preventDefault();
     // virer active de tous les elements
     event.target.href.classList.add('active')
     alert('Tu as cliqué sur ' + event.target.href);
  }
});

Note qu'on peut faire la meme chose avec des boutons radios cachés et du CSS3
Modifié par bazooka07 (09 Nov 2019 - 14:22)