Avec le javascript, on peut changer les classes associées à une balise. Les applications sont multiples, et on va en voir 2 : un menu déroulant et la coloration en rouge des champs de formulaires qui ne sont pas bien remplis.
Vous avez besoin d'une image :
Règle de nommage : si le lien 1 a un sous menu, la balise ul du sous menu est appelée (id) "sousmenu1", et l'image correspondante (pour déérouler le menu) a un id="lien1"
Il faut céer un fichier nommé "presentation.js". On créera la fonction "cache_montre()" qui attend comme paramètre le n° du menu
Il faut simplement créer une fonction qui change l'attribut de classe des élements "lien1" et "sousmenu1" lors du clic sur l'image. Pour cela, dans le code XHTML, lors du clic, la même fonction est appelée, avec "1" comme parametre.
<a href="#" id="lien1" class="cache_montre" onclick="cache_montre('1'); return false;"> </a>
Par défaut, le menu est déroulé, il est roulé au chargement de la page par JS, ce qui permet aux utilisateurs n'ayant pas JS d'accéder au sous menu.
<body onload=" cache_montre('1'); cache_montre('1.3'); cache_montre('2'); cache_montre('2.3'); cache_montre('4');">
La fonction appelée est composée de 3 parties :
On veut indiquer les champs non valides du formulaire par cette méthode plutôt que par une fenêtre.
C'est exactement la même manière de procéder que pécedemment : il faut changer la classe des champs de formulaires. Sauf que cette fois-ci, pas besoin de l'id de l'objet à changer.