Problème masquer div avec javascript

agencetourix Messages postés 203 Statut Membre -
agencetourix Messages postés 203 Statut Membre - 28 mars 2011 à 00:42

Bonjour

Je souhaite cacher des div dans ma page web avec du javascript, voici mon code, je ne trouve pas l'erreur, pourquoi ça ne fonctionne pas?

Merci pour votre aide, là je bloque :(

<script type="text/javascript">
function montrer(element)
{
var les_elements = new Array("a_propos","nos_services","references","partenaires","contact")
for(var i=0; i<les_elements.lenght; i++)
document.getElementById(les_elements[i]).style.display='none';
document.getElementById(element).style.display='block';
}
</script>

et voici mes liens de menu concernés :

<div id="a_propos"></div>
<div id="nos_services"></div>
<div id="references"></div>
<div id="partenaires"></div>
<div id="contact">
<form>
<p>NOM<br />
<input type="text" name="nom" />
</p>
<p>E-MAIL<br />
<input type="text" name="email" />
</p>
<p>VOTRE MESSAGE<br />
<textarea name="message" rows="10" cols="45"></textarea>
</p>
<input type="submit" value="ENVOYER" />
</form>
</div>

MERCI INFINIMENT POUR VOS CONSEILS EXPERTS

Afficher la suite

11 réponses

Réponse 1 / 11
sculderoy Messages postés 84 Statut Membre 15
Bonsoir,

Si tu veux mon avis, tu ferais mieux de te tourner vers la librairie jQuery de javascript (https://jquery.com/
Cette librairie te permet de faire un peu ce que tu veux en Javascript en 10 fois moins de mots et plus proprement.

Par exemple pour masquer tes divs, tu n'auras qu'à écrire ça :
```
<script>
$(document).ready(function(){
     $('div.laClasseDeTesDivs').hide();
});
</script>
```
0
Réponse 2 / 11
agencetourix Messages postés 203 Statut Membre 33

Merci pour cette info, je vais jeter un oeil à cette librairie...

Par contre en utilisant le script que tu m'as fournis aimablement,

je dois changer la ligne suivante dessus si j'ai bien compris:

$('div.laClasseDeTesDivs').hide();

qui deviendra quoi? pour mes différentes div?

Merci beaucoup.
0
Réponse 3 / 11
sculderoy Messages postés 84 Statut Membre 15
Ton xHTML deviendrait :
```
<div id="a_propos" class="hidden"></div>
<div id="nos_services" class="hidden"></div>
<div id="references" class="hidden"></div>
<div id="partenaires" class="hidden"></div>
```
et le JavaScript
```
<script>
$(document).ready(function(){
     $('div.hidden').hide();
});
</script>
```
Par exemple. Après je sais qu'il y a des gens qui n'aiment pas trop utiliser les classes pour les séléctions en JavaScript... Mais bon pour le moment on va s'en tenir à ça ;)
0

agencetourix Messages postés 203 Statut Membre 33

Salut, merci encore pour ton aide.

Je ne vois pas où ça cloche, s'il te plait si tu peux jeter un oeil à ma page complète (pas très remplie pour le moment) pour voir où ça cloche ?

PS, j'ai ajouté ceci dans le CSS:

#a_propos,
#nos_services,
#references,
#partenaires,
#contact,
{
display: none;
}

Voici la source XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>MON SITE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
<script>
$(document).ready(function(){
     $('div.hidden').hide();
});
</script>

</head>
<body>

<div id="container"> 

<div id="top">
<img src="images/logo.png" alt="Logo"/><br />
<em>slogan</em>
</div>

<div id="menu">
<a href="javascript:montrer('a_propos')">A Propos</a>
<a href="javascript:montrer('nos_services')">Nos services</a>
<a href="javascript:montrer('references')">Références</a>
<a href="javascript:montrer('partenaires')">Partenaires</a>
<a href="javascript:montrer('contact')">Contact</a>
</div>

<div id="middle">

<div id="a_propos" class="hidden">
Mon texte
</div>

<div id="nos_services" class="hidden"></div>

<div id="references" class="hidden"></div>

<div id="partenaires" class="hidden"></div>

<div id="contact" class="hidden">

<form>
<p>NOM<br />
<input type="text" name="nom" />
</p>
<p>E-MAIL<br />
<input type="text" name="email" />
</p>
<p>VOTRE MESSAGE<br />
<textarea name="message" rows="10" cols="45"></textarea>
</p>
<input type="submit" value="ENVOYER" />
</form>
</div>

</div>

<div id="foot">pied de page
</div>

</div>

</body>
</html>

Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Réponse 5 / 11
sculderoy Messages postés 84 Statut Membre 15

Petit un : Tu n'as pas besoin de les masquer en CSS.
Petit deux : N'oublie pas de télécharger et d'inclure la bibliothèque jQuery à ta page =) elle n'est pas native à JavaScript (c'est une bibliothèque quoi ^^)
0
Réponse 6 / 11
agencetourix Messages postés 203 Statut Membre 33

Ok je supprime la partie CSS en trop

Je ne sais pas faire, tu peux m'aider et me montrer comment on télécharge et on inclut une bibliothèque jQuery dans mon cas?

Si ça prends pas trop de temps à faire ;)
0
Réponse 7 / 11
agencetourix Messages postés 203 Statut Membre 33

J'ai jamais utilisé une librairie jQuery, quelqu'un peut me donner un exemple, si possible en résolvant mon problème de faire apparaître/masquer des divs ?
0
Réponse 8 / 11
sculderoy Messages postés 84 Statut Membre 15

je t'ai envoyé un MP
0
Réponse 9 / 11
agencetourix Messages postés 203 Statut Membre 33

Merci pour ta proposition, mais je préfère qu'on m'explique ici

J'ai pas trop confiance aux logiciels de prise de contrôle à distance.
0
1. sculderoy Messages postés 84 Statut Membre 15
  
  ^^ je comptais pas te supprimer ton boot.ini ou autre choses du style :p
  En gros tu dois télécharger le jquery.js et l'inclure dans ta page html comme tout autre script js
  
  0
Réponse 10 / 11
agencetourix Messages postés 203 Statut Membre 33
Ok merci pour ton aide mais peux tu me dire à quoi ressembleront mes liens de menus ?

<div a href="javascript... ?>ACCUEIL</div>

il faut que je les fasse pointer vers du javascript ? ça donnerai quoi par exemple dans mon cas ?

J'ai fait comme tu m'as dit mais là mes div ne s'affichent plus, même si je clique sur les titres des menus :(

Je te redonne le code que j'ai actuellement, merci pour ton aide:

Entre <head> et </head> j'ai donc
```
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script>
$(document).ready(function(){
     $('div.hidden').hide();
});
</script>
```
Pour mes menus, dans le body et dans une div nommé "menu" j'ai :
```
<div id="menu">
<a href="javascript:montrer('a_propos')">A Propos</a>
<a href="javascript:montrer('nos_services')">Nos services</a>
<a href="javascript:montrer('references')">Références</a>
<a href="javascript:montrer('partenaires')">Partenaires</a>
<a href="javascript:montrer('contact')">Contact</a>
</div>
```
Et enfin dans le body et dans une div nommé "container" j'ai ceci :
```
<div id="container">
<div id="a_propos" class="hidden"></div>
<div id="nos_services" class="hidden"></div>
<div id="references" class="hidden"></div>
<div id="partenaires" class="hidden"></div>
<div id="contact" class="hidden">
<form></form>
</div>
</div>
```
C'est la 2ère fois que je code en javascript, merci pour votre indulgence ;)
0
Réponse 11 / 11
agencetourix Messages postés 203 Statut Membre 33

Up please.

Masquer / afficher des div simplement ???

Une solution les amis ?
0

Problème masquer div avec javascript

11 réponses

Discussions similaires

Newsletters