Javascript / Jquery Probleme étrange !

[913] Messages postés 4 Statut Membre -  
vincebzh Messages postés 144 Statut Contributeur -
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

  1.
    prosthetiks Messages postés 1309 Statut Membre 431
     
    Je veux bien t'aider, mais dans ce cas je me verrai contraint de jeter tout ton code... a toi de voir...
    0
    1. prosthetiks Messages postés 1309 Statut Membre 431
       
      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
  2. Utilisateur anonyme
     
    salut ,

    comment ca se fait que y'a pas de point-virgule dans ton code js ?
    0
    1. vincebzh Messages postés 144 Statut Contributeur 29
       
      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

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Arrondir nombre Math.round
ohklik -
Sugel -

1 réponse
javascript arrondi après la virgule
cap -
Thomas -

4 réponses
a javascript error occurred in the main process
Kytsu1241 -
lolomusic667 -

1 réponse