Partage
  • Partager sur Facebook
  • Partager sur Twitter

Changement de couleur du menu actif

Sujet résolu
    12 mai 2010 à 12:33:55

    Bonjour,

    Comme dit dans le titre, je voudrai changer de couleur le le lien du menu ainsi que le fond qui est actif.
    j'ai fais le tour sur le web, et j'ai trouver quelque chose d'interressant (parce que tres tres simple) mais apparement il y a un pb.
    Donc j'aurai besoin de votre aide.

    Voici le code en js :
    <script type="text/javascript">
        function AjoutSelectionA(link) {
            link.className = "selected";
        }
    </script>
    
    <script type="text/javascript">
        function AjoutSelectionA(link) {
            var ul = document.getElementsByTagName("ul")[0];
            var allLinks = ul.getElementsByTagName("a");
            for (var i=0; i < allLinks.length; i++) { 
                allLinks[i].className = ""; 
            }
            link.className = "selected"; 
        }
    </script>
    


    voici le html
    <li><a href="index2.html" onclick="AjoutSelectionA(this);return false;" class="selected">Accueil</a></li>
     <li><a onclick="AjoutSelectionA(this);return false;" href="#" class="selected">Item 2</a></li>
     <li><a onclick="AjoutSelectionA(this);return false;" href="#" class="selected">Item plus long</a></li>
     <li><a onclick="AjoutSelectionA(this);return false;" href="#" class="selected">Item plus long</a></li>
     <li><a  href="contact.html" onclick="AjoutSelectionA(this);return false;"class="selected">Contact</a></li>
    </ul>
    

    et eenfin voici le css
    ul {
     padding:0;
     margin:0;
     list-style-type:none;
     }
     
    li {
     margin-left:2px;
     float:left; /*pour IE*/
     }
     
    ul li a {
     display:block;
     float:left;   
     width:120px;
     height:33px;
     color:#666;
     text-decoration:none;
     text-align:center;
     padding:5px;
     /*pour avoir un effet "outset" avec IE :*/
     }
    ul li a:hover {
     background-color:#D3D3D3;
     } 
     
    	
    .selected{
    	background:#F00;
    }
    


    En gros lorsqu'on clique sur le lien la fonction javascript s'active et donc le lien avec le background change de couleur.
    Mais d'abord le lien ne marche pas, c'est a dire qu'on arrive pas a naviguer d'une page a une autre,
    et lorsqu'on arrive sur la page, tous les <li. sont en classe "selected"


    Merci de votre aide.

    • Partager sur Facebook
    • Partager sur Twitter
      12 mai 2010 à 13:22:40

      Une coloration selon la page courante, ça se fait en PHP, pas en JS.
      • Partager sur Facebook
      • Partager sur Twitter
        12 mai 2010 à 13:38:08

        ok, alors je passe l'info ds l'url?

        Comment je fais exactement?
        • Partager sur Facebook
        • Partager sur Twitter
          12 mai 2010 à 13:59:07

          Ya moyen de faire deplacer la discussion alors?
          • Partager sur Facebook
          • Partager sur Twitter
            12 mai 2010 à 14:28:41

            Yep. Alerte les modos à l'aide du lien en bas de page, et demande-leur gentiment ;)
            • Partager sur Facebook
            • Partager sur Twitter

            Changement de couleur du menu actif

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
            • Editeur
            • Markdown