Sujet Précédent Sujet Suivant

Javascript / Jquery Probleme étrange !

Fermé
[913] Messages postés 2 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 12 janvier 2012 - Modifié par [913] le 12/01/2012 à 18:25
vincebzh Messages postés 137 Date d'inscription lundi 22 mars 2010 Statut Contributeur Dernière intervention 7 mai 2013 - 12 janv. 2012 à 21:58
Bonjour,
voila j'ai un probleme avec ce code :

<html>
<head>
<script>
function test1() {
document.getElementById('div1').style.display='block'
document.getElementById('div2').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test2() {
document.getElementById('div2').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'

}
function test3() {
document.getElementById('div3').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'

}
function test4() {
document.getElementById('div4').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test5() {
document.getElementById('div5').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test6() {
document.getElementById('div6').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test7() {
document.getElementById('div7').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test8() {
document.getElementById('div8').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test9() {
document.getElementById('div9').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test10() {
document.getElementById('div10').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div12').style.display='none'
}
function test11() {
document.getElementById('div11').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div4').style.display='none'
document.getElementById('div12').style.display='none'
}
function test12() {
document.getElementById('div12').style.display='block'
document.getElementById('div1').style.display='none'
document.getElementById('div3').style.display='none'
document.getElementById('div2').style.display='none'
document.getElementById('div5').style.display='none'
document.getElementById('div6').style.display='none'
document.getElementById('div7').style.display='none'
document.getElementById('div8').style.display='none'
document.getElementById('div9').style.display='none'
document.getElementById('div10').style.display='none'
document.getElementById('div11').style.display='none'
document.getElementById('div4').style.display='none'
}
</script>
<div style="position:absolute"><a href="#" onclick="test1()">menu 1</a></div>
<div style="position:absolute;margin-left:100px"><a href="#"onclick="test2()">menu 2</a></div>
<div style="position:absolute;margin-left:200px"><a href="#"onclick="test3()">menu 3</a></div>
<div style="position:absolute;margin-left:300px"><a href="#"onclick="test4()">menu 4</a></div>
<div style="position:absolute;margin-left:400px"><a href="#"onclick="test5()">menu 5</a></div>
<div style="position:absolute;margin-left:500px"><a href="#"onclick="test6()">menu 6</a></div>
<div style="position:absolute;margin-left:600px"><a href="#"onclick="test7()">menu 7</a></div>
<div style="position:absolute;margin-left:700px"><a href="#"onclick="test8()">menu 8</a></div>
<div style="position:absolute;margin-left:800px"><a href="#"onclick="test9()">menu 9</a></div>
<div style="position:absolute;margin-left:900px"><a href="#"onclick="test10()">menu 10</a></div>
<div style="position:absolute;margin-left:1000px"><a href="#"onclick="test11()">menu 11</a></div>
<div style="position:absolute;margin-left:1100px"><a href="#"onclick="test12()">menu 12</a></div>


<div onmouseout="test13()" id="div1" style="position:absolute;top:30px;background-color:red;width:200px;height:200px;display:none">

</div>
<div onmouseout="test14()" id="div2" style="position:absolute;top:30px;margin-left:350px;background-color:navy;width:200px;height:200px;display:none">

<div id="div3" style="position:absolute;top:30px;margin-left:350px;background-color:green;width:200px;height:200px;display:none">
<div id="div4" style="position:absolute;top:30px;margin-left:350px;background-color:yellow;width:200px;height:200px;display:none">
<div id="div5" style="position:absolute;top:30px;margin-left:350px;background-color:pink;width:200px;height:200px;display:none">
<div id="div6" style="position:absolute;top:30px;margin-left:350px;background-color:grey;width:200px;height:200px;display:none">
<div id="div7" style="position:absolute;top:30px;margin-left:350px;background-color:brown;width:200px;height:200px;display:none">
<div id="div8" style="position:absolute;top:30px;margin-left:350px;background-color:blue;width:200px;height:200px;display:none">
<div id="div9" style="position:absolute;top:30px;margin-left:350px;background-color:purple;width:200px;height:200px;display:none">
<div id="div10" style="position:absolute;top:30px;margin-left:350px;background-color:orange;width:200px;height:200px;display:none">
<div id="div11" style="position:absolute;top:30px;margin-left:350px;background-color:white;width:200px;height:200px;display:none">
<div id="div12" style="position:absolute;top:30px;margin-left:350px;background-color:navy;width:200px;height:200px;display:none">


</div>
</body>
</html>

j'essaye de faire en sorte que quand on clique sur un lien ( menu 1) ça affiche la div propre au lien (div1) et cacher les autre div (div,2,3,4,5,6...) mais bizarrement cela ne fonctionne que pour le menu 1 et 2

2 réponses

Réponse 1 / 2
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
12 janv. 2012 à 18:57
Je veux bien t'aider, mais dans ce cas je me verrai contraint de jeter tout ton code... a toi de voir...
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 12/01/2012 à 20:17
Voici un code plus générique et plus court 

<html> 
  <head> 
    <style type="text/css">
      nav{
        background-color:#ccc;
        width:100%;
        height:30px;
      }
      nav ul{
        list-style:none;
        width:100%;
      }
      nav ul li{
        display:inline;
        line-height:30px;
        margin-left:70px;
        position:relative;
      }
      nav ul li a{
        text-decoration:none;
        color:black;
      }
      nav .submenu{
        position:absolute;
        z-index:9999;
        top:25px;
        width:200px;
        height:200px;
        background-color:#444;
        left:-20px;
        display:none;
      }
      nav .submenu.active{
        display:block;
      }
    </style>
    </head>
    <body>
      <nav id="nav">
        <ul>
          <li><a href="#">Menu 1</a><div class="submenu">aa</div></li>
          <li><a href="#">Menu 2</a><div class="submenu">aa</div></li>
          <li><a href="#">Menu 3</a><div class="submenu">aa</div></li>
          <li><a href="#">Menu 4</a><div class="submenu">aa</div></li>
          <li><a href="#">Menu 5</a><div class="submenu">aa</div></li>
        </ul>
      </nav>
      <footer>
        <script type="text/javascript">
          var DomElement = [];
          DomElement.navBar = {
            _container: document.getElementById('nav'),
            _mainLinks: [],
            _activeSubmenu: null,
            initialize: function() {
              this._mainLinks = this._container.getElementsByTagName('a');
              this.setEventsListener();
            },
            setActiveMenu: function(e){
              if(this._activeSubmenu) this._activeSubmenu.className = 'submenu';
              this._activeSubmenu = e.target.parentNode.getElementsByTagName('div')[0];
              this._activeSubmenu.className = 'submenu active';
            },
            setEventsListener: function(){
              var self = this;
              for(var i in this._mainLinks){
                if(i >= 0){
                  this._mainLinks[i].addEventListener("click", function(e){self.setActiveMenu(e);}, false);
                }
              }   
            },
          }
          DomElement.navBar.initialize();
        </script>
      </footer>
    </body>
</html>
0
Réponse 2 / 2
Utilisateur anonyme
12 janv. 2012 à 21:01
salut ,

comment ca se fait que y'a pas de point-virgule dans ton code js ?
0
vincebzh Messages postés 137 Date d'inscription lundi 22 mars 2010 Statut Contributeur Dernière intervention 7 mai 2013 29
12 janv. 2012 à 21:58
Parce que c'est mal codé ?
Le point-virgule n'est pas obligatoire pour marquer une fin de ligne en javascript, un saut de ligne suffit.
Par contre, si jamais ce code doit être minifié, tout va péter.
http://www.siteduzero.com/tutoriel-3-102952-bonnes-pratiques-javascript.html#ss_part_9
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
java activée mais ne fonctionne pas !
chating -
chating -

4 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses
Nodejs.exe est-ce un virus
Maverik1956 -
Malekal_morte- -

13 réponses