Modifier le CSS d'une classe

Bonsoir,

je souhaite, lorsque l'utilisateur clique sur un lien passer le display de 2 div de block à none. J'ai donc attribué la classe "cacher" à ces 2 divs, et lorsque l'utilisateur clique sur le lien, ça envoie sur une page où j'ai mis ce code

Code:

---

1 2 3 4 5 6

<script> var classCacher = document.getElementsByClassName("cacher"); for (i=0;i<classCacher.length;i++) { i.style.display=none; } </script>

---

mais le display des 2 div reste à block. Comment faudrait-il faire ?

Code:

---

1 2 3 4 5

var classCacher = document.getElementsByClassName("cacher");   for ( var i = 0; i < classCacher.length; i++ ){ classCacher[i].style.display = "none"; }

---

Merci :merci:

Ca se fait aussi plus facilement en jQuery (que tu utilises par ailleurs...).

Euh je ne suis pas sûr de comprendre... Pourquoi parcourir les éléments en JavaScript et modifier leur style en inline quand on peut simplement utiliser CSS ?

Code:

---

.cacher { display: none; }

---

La raison est que ça doit être dynamique : au départ, le display est à block et c'est seulement quand l'utilisateur clique sur un des 2 liens de navigation que je passe le display à none.

C'est l'attribution de la classe qui est dynamique non ? Autrement tu pourrais avoir des éléments avec une classe "cacher" qui sont visibles...*

exemple: http://jsfiddle.net/yuLmcqhr/

Oui, tout-à-fait, c'est bien l'attribut...

Bonjour Laurent,

explique-nous un peu comment tu effectues le "onclick"* sur le lien ;)
(code à l'appui)

* :

• en Javascript pur
• en jQuery

:aie: Je viens d'écrire une réponse (assez longue) ; ma connexion s'est terminée donc au moment d'envoyer le post, ça m'a demandé de me reconnecter, ce que j'ai fait, mais après, post disparu...donc je recommence :

désolé mais pas de onclick. Les liens sont de ce genre : <a href="'.$_SERVER['PHP_SELF'].'?page=planning&m='.$monthValue.'&y='.$yearValue.'&eff=1">&lt;&lt;</a>. Le PHP_SELF indique qu'on reste sur la même page ; mais cette page en inclut une deuxième dont le nom est donné par le paramètre page, donc ici, on inclue la page planning.htm (l'extension est toujours htm). Le fait de changer l'attribut display de la classe "cacher" est donné par le paramètre eff et ensuite dans planning.htm :

Code:

---

1 2 3 4 5 6 7

if (isset($_GET['eff'])) {?> <script> var classCacher = document.getElementsByClassName("cacher"); for (i=0;i<classCacher.length;i++) { classCacher[i].style.display = "none"; } </script>

---

Bonjour,
c'est donc bien ce qu'avait flairé SylvainPV.

Nul besoin de JavaScript ici :

Code:

---

1 2 3 4

<?php if (isset($_GET['eff'])) { ?> <style type="text/css">.cacher { display: none; }</style> <?php } ?>

---

A mettre avant </head>.


En dehors du fait que tu manques de technique(s), c'est surtout la LOGIQUE* qui te fait le plus défaut.
*Ici, il s'agissait de trouver la solution la plus simple.

N.B. Et comme tu n'as QUE 2 div à masquer, je me serais même passé d'ajouter une class, en mettant directement sur chaque div :

Code:

---

1 2 3

<div<?php if (isset($_GET['eff'])) { echo ' style="display: none;"'; }; ?>> ..... </div>

---

J'irais même plus loin, quitte à recharger toute une page générée via PHP, autant virer complètement les blocs cachés du HTML généré. Ce sera ça de moins à charger côté client.

Mais bon, si on commence à faire la fine bouche niveau performances, autant se passer de PHP complètement :aie:

Il y a une impossibilité dans les propositions de Jérôme au post #11 : la variable $_GET['eff'] n'existe pas dans les fichiers qui contiennent les div ; en effet, ces fichiers sont inclus dans celui sur lequel je fais le lien.