11485 sujets

JavaScript, DOM et API Web HTML5

Jquery : Double affichage/masquage de div

Bonjour,

Premièrement désolé si je définis mal mon problème, mais je ne sais pas exactement quel termes lui donner...

Mon but est en fait d'afficher une série de div (la nouvelle affichée prenant la place de l'autre), dans un premier temps et dans une div ainsi affichée refaire la même chose.
Donc avoir une sorte de sous-sous-menu.

Pour le premier menu, c'est bon, ça marche très bien (je remercie d'ailleurs Benjamin D.C. qui avait posté le code que j'ai utilisé, dans un ancien sujet sur ce forum).

Le souci vient au moment ou je veux afficher la nouvelle série de div. L'ancienne devient invisible alors que mon but serait qu'elle reste visible au contraire.

Voici le code utilisé :
(je ne sais pas si il y a aussi besoin du css)


<script language="javascript">
<!--
image0 = new Image;
image0.src = "menu/grosk.png";
image1 = new Image;
image1.src = "menu/grosk-yellow.png";

function changeImage0() {
document.getElementById("distance").src=image0.src; }

function changeImage1() {
document.getElementById("distance").src=image1.src; }
//-->
</script>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js></script>
<script>
  $(function(){
    var divs = $(".sous_menu");
    divs.not("#box2").hide();
    $("a").click(function(){
      divs.filter(":visible").hide();
      $($(this).attr("href")).show();
    });
  });
</script>
</head>

<body>
<div id="menu">
<p align="right">
<a href="#box1" onMouseOver="changeImage1();" onMouseOut="changeImage0();"><img src="menu/k.png" onmouseover="this.src='menu/k-yellow.png'" onmouseout="this.src='menu/k.png'"/></a>
<a href="#box2" onMouseOver="changeImage1();" onMouseOut="changeImage0();"><img src="menu/work.png" onmouseover="this.src='menu/work-yellow.png'" onmouseout="this.src='menu/work.png'"/></a>
<a href="#box3" onMouseOver="changeImage1();" onMouseOut="changeImage0();"><img src="menu/contact.png" onmouseover="this.src='menu/contact-yellow.png'" onmouseout="this.src='menu/contact.png'"/></a>
</p>
</div>
<div id="k"><a id="grosk"><img src="menu/grosk.png" border=0 id="distance"></a></div>
<div class="sous_menu" id="box1">
</div>
<div class="sous_menu" id="box2">
<p align="left">
<a href="print.html"><img src="menu/print.jpg" onmouseover="this.src='menu/print.png'" onmouseout="this.src='menu/print.jpg'"/></a><br />
<a href="illustration.html"><img src="menu/illustration.jpg" onmouseover="this.src='menu/illustration.png'" onmouseout="this.src='menu/illustration.jpg'"/></a><br />
<a href="web.html"><img src="menu/web.jpg" onmouseover="this.src='menu/web.png'" onmouseout="this.src='menu/web.jpg'"/></a><br />
<a href="dessin.html"><img src="menu/dessin.jpg" onmouseover="this.src='menu/dessin.png'" onmouseout="this.src='menu/dessin.jpg'"/></a><br />
</p>
</div>
<div class="sous_menu" id="box3">
<b><p class="couleur">Contact</p></b>
</div>
</body>
</html>


J'avais essayé de dupliquer le script et l'adapter pour la div "box2" mais en affichant les nouvelles divs, la "box2" disparaissait.

Si il manque des informations ou si il y a besoin de screen, n'hésitez pas.

Je suis assez débutant dans la création de site et surtout au niveau du javascript que je commence à déchiffrer très doucement Smiley smile .

Merci d'avance de votre aide !
Modifié par MagMell (20 Aug 2010 - 11:22)
Salut ,

tu aurai un lien vers ton site ? je trouve plus pratique pour visualiser Smiley smile

Ensuite si tu a du mal en JavaScript tu devrais essayer de commenter ton code pour savoir exactement ce que cela fais Smiley smile . Ça permet aussi de comprendre mieux/plus vite , pour essayer de t'aider Smiley smile

Comme j ai compris : 
<script>
 $(function(){ 

    var divs = $(".sous_menu");  // on met tous les éléments de la classe sous menu dans la variable divs 

    divs.not("#box0").hide();  // on cache tous les éléments de la classe sous menu sauf celui qui a l'id box0 

    $("a").click(function(){ // quand on clique sur un lien ( n'importe quel lien de la page ? ca parait peut être un peu inquiétant mais bon .. ) 

      divs.filter(":visible").hide();   // on cache les sous menu qui ont un attribut visible 

      $($(this).attr("href")).show();  // on affiche euh je sais pas trop quoi .. on dirait qu'il n'y a rien dans tes attributs href de tes a .. 

      return false; // on ne suit pas le lien 

    });

  });

</script>


Pour le coup je pense que cela ne peux pas marché avec une seule fonction clique pour gérer les 2 ( menu et sous menu ) .. j'ai l'impression que il nous manque le code pour le menu normal je suppose ? je sais pas trop .. ^^ un lien svp Smiley langue
Merci de ta réponse Smiley smile

Je n'ai pas encore mis le site en ligne et j'ai essayé de rusé pour pallier à ce problème donc je ne pense pas que ca puisse beaucoup aider dans son état actuel...

Néanmoins j'aimerai quand même savoir comment ca fonctionne, j'ai donc édité le code de mon premier message, j'ai mis tout le code de ma page.

En fait ce que j'ai appelé "sous_menu" est le premier pallier et je voulais en rajouter un second dans la "box2".

Mais si j'ai bien compris il y a un problème au niveau du click du script. En gros il faudrait que je puisse donner un id aux liens concernés, c'est ca ?
Sujet clos
Aller à