11540 sujets

JavaScript, DOM et API Web HTML5

[RÉSOLU] Couleur lien sur page en cours avec js / double classe

Bonjour à tous.

À la vue de mon sujet (assez récurrent sur le forum et le net) je précise qu'avant de poster je suis allé faire un tour ici:
http://www.alsacreations.com/astuce/lire/28-styles-lien-page-en-cours.html
http://www.fastclemmy.com/index.php?rubrique=javascript
et j'en passe... mais je n'ai rien pu adapter à ma situation. Smiley ohwell

J'ai une fonction en javascript qui récupère chaque changement d'url et qui attribut une classe css d'animation à une div précise comme ceci:


/* FONCTION HASCHANGE */
function locationHashChanged() {
    if (location.hash === "#/home") {
      document.getElementById('animHome').className ='homeAnimStart';  
     /*document.getElementByClassName('header .nav ul li a').className ='header courant';*/
    }
}
 
window.onhashchange = locationHashChanged;


Bref jusqu'ici ça marche l'animation contenu dans la div"animHome" joue correctement la classe d'animation "homeAnimStart" dès qu'on est sur "home" Smiley smile

Toutefois mon but est de faire en sorte qu'avec une ligne quasi identique à celle ci:
"document.getElementById('animHome').className ='homeAnimStart';"
je puisse cibler une classe dans une classe css afin de changer la couleur du lien de la page active.

Mon css au niveau de mon menu se présente ainsi

.header .nav ul li {
    font-size: 20px;
    text-rendering: bold;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    display: block;
    list-style: none outside none;
    float: left;
}

.header .nav ul li a { /*état par défaut*/
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0 20px 0 0;
    text-align: center;
    color: #fff;
    /*
    transition-duration: 0.25s, 0.25s;
    transition-property: color, background;
    transition-timing-function: linear, ease-in;
*/	
}

.header .nav ul li a:hover { /*état survolé*/
    color: #ffcc00;
    outline: 0 none;
    text-decoration: none;
    
}


Par exemple avec ma fonction énoncé plus haut si je suis sur la page "home" alors mon lien "home" (qui se trouve là dedans: .header .nav ul li) se colore et reste en rouge comme avec l'état "hover":

.header courant {
	color: #EF3D42;
	outline: 0 none;
	text-decoration: none;
}

Jusqu'à que l'on clic sur un autre lien du menu.

J'ai pu comprendre que mon souhait serait faisable uniquement en Js donc j'ai testé avec une ligne de ce type (je suis novice en JS):

document.getElementByClassName('header .nav ul li a').className ='header courant';
Mais ça ne marche pas

Quelqu'un a t-il une piste?
Merci d'avance
Modifié par xavierk (14 Mar 2013 - 20:42)
Merci pour ta réponse Super_baloo8.

En effet ta piste me semble être une bonne solution mais je bute encore un peu.
J'ai donc essayé et ça donne ça si j'ai bien compris la logique:
maClasseActuelle = maClasseActuelle + "monAncienneClasse";

 document.getElementById('header .nav ul li').className =  document.getElementById('header .nav ul li') + " headercourant";


Seulement ça ne marche pas et je suis encore moins sûr qu'il faille inclure le ".nav ul li" juste après header... mais comme mes liens sont inclus dans des listes à puces régis par une autre classe Smiley sweatdrop je pense que c'est plus subtil..

Faut-il que je cible seulement ma classe "header" sans l'autre classe "nav" et les "ul et li" ou bien faut-il que je cible "header .nav"?

En ce qui concerne ton conseil à propos de l'utilisation de Jquery qu'entends tu par là; car j'utilise déjà Jquery pour faire fonctionner l'ensemble de mon code? Smiley murf

Si tu peux m'aider
Merci d'avance.
Il fallait le dire que tu utilisais jQuery.

Alors déjà ta première fonction peut devenir ceci :

function locationHashChanged() {
    if (location.hash === "#/home") {
     $('#animHome').addClass('homeAnimStart');  
    }
}
 
window.onhashchange = locationHashChanged;


Plus simple et lisible de sus ?

Attention, le onhashchange n'est supporté qu'à partir de la version 8 d'IE!

Petit problème que je n'avais pas vu, ta déclaration CSS, il manque un point pour indiquer une class

.header .courant {
	color: #EF3D42;
	outline: 0 none;
	text-decoration: none;
}


Mais il y a quelque chose que je ne comprends pas, peut tu fournir un code HTML SIMPLE de :

- L'état avant l'action
- L'état après action (celui que tu souhaites avoir)
Modifié par Super_baloo8 (15 Mar 2013 - 20:38)
Salut, Super_baloo8

Merci beaucoup pour ton intervention. Je vais essayer de simplifier mon code comme tu me l'as suggéré en exemple; c'est sûr que ce sera plus lisible comme ça Smiley smile

En ce qui concerne mon problème de lien je l'ai résolu avec autre chose. En effet dans mon code existant j'avais déjà une fonction "HashChanged" qui "drivé" une classe css en particulier et qui permettait de mettre en évidence un lien bouton sur un type de page précis.

J'ai donc tout bonnement fait de la multiclasse en soumettant mes liens du menu dans le html avec cette classe. Du coup, à chaque fois que je change de page le lien se colore bien et s’éteint lorsqu'on est plus sur la page en question.

Dans mon code ça se présente ainsi:

<div class="nav">
            <ul>
              <!--  Add require site page navigation  -->
              <li><a class="maClasse1">LIEN 1</a></li>
              <li><a class="maClasse2 maClasse3 maClasse4">LIEN 2</a></li>
              <li><a class="maClasse5 maClasse6 maClasse7">LIEN 3</a></li>
              <li><a class="maClasse8">LIEN 4</a></li>
            </ul>
          </div>


J'aurais dû faire preuve de réflexion avant de poster car la réponse était quasi sous mes yeux! toutefois tes conseils m'ont bien servi surtout pour la partie JQuery. D'ailleurs à ce propos, quand tu dis que la fonction "HashChanged" n'est compatible qu'à partir de la version IE8; connais tu un autre moyen en JS (une sorte de code conditionnel à implémenter à côté de l'existant) qui permettrait de garder la même fonction mais pour IE exclusivement; qu'est ce qu'il faudrait que je fasse dans ce cas? Smiley confused

En tout cas merci infiniment pour ton aide. Smiley biggrin
Modifié par xavierk (21 Mar 2013 - 13:58)
Sujet clos
Aller à