[Résolu] Appliquer un style à un lien selon l'ID sélectionné

Bonjour,

Après avoir lu de nombreuses lignes sur ce merveilleux site et forum, je daigne enfin poser ma première question =)

J'ai lu la page qui permet, en PHP, de changer le style d'un lien selon la page courante (pratique, car j'utilise des menus en include)

Sur un site web, j'ai 4 éléments d'un menu et en dessous 4 div qui s'alternent selon le clic dans le menu.
En gros :
Menu 1 - Menu 2 - Menu 3 - Menu 4
div 1 - div 2 - div 3 - div 4
On ne voit que la div 1, et si on clique sur Menu 2, div 2 remplace div 1, etc.

Tout ça sur une même page.

Comment faire pour appliquer un style au lien sur lequel on a cliqué, que ce soit en CSS(2-3), en PHP, JS, peu importe.

Genre mes liens sont en bleu, hover orange, et si on clique sur menu 2, alors on voit la div 2 et il faudrait que le lien reste orange...

Un peu chaud à expliquer mais bon...

Merci d'avance pour vos réponses =)
Modifié par LightBen (05 Dec 2011 - 03:02)

Salut,

Tu ajoutes une classe en JavaScript au lien lorsque l'événement onclick y est déclenché et tu ajoutes un règle CSS dont le sélecteur sélectionne le lien comportant la classe en question.

J'suis pas un pro du JS, peux-tu m'aider ?

Voici un lien exemple :

<a href="#div1" id="lien1">LIEN 1</a>

Merci =)

A priori, tu veux que le menu actif soit d'une couleur en particulier.

Tu peux faire ça très simplement en utilisant JQuery.

$(document).ready(function() {
  $("a.menulink").click(function() {
    $("a.menulink").removeClass("selected");
    $(this).addClass("selected"); 
  });
});

Tes liens devront se présenter ainsi:

<a href="#div1" id="lien1" class="menulink">LIEN 1</a>
<a href="#div2" id="lien2" class="menulink">LIEN 2</a>

Ainsi si tu cliques sur LIEN 2 tu obtiendras:

<a href="#div2" id="lien2" class="menulink selected">LIEN 2</a>

et il faut définir classe selected dans ton CSS pour que le lien soit orange.

J'ai essayé mais je n'y arrive pas... je ne sais pas à quoi cela est du : déjà, je n'ai pas défini de classe, mais d'identifiant, donc au lien de

a.menulink

j'ai

#menu-top a

Est-ce que la façon de l'utiliser (espaces, ID, etc) change l'efficacité de ta solution ?

Ensuite, en fait je n'ai pas 4 div, mais une, et en cliquant sur lien2 ça la fait décaler vers la gauche pour la faire disparaitre.

Autant mettre le lien ici : *lien supprimé*

C'est le second sujet où je mets ce site, si jamais ça fait trop pub, je l'enlève à la fin du topic =)

Edit : j'ai essayé en mettant une classe bidon (tu vas voir dans le code source) avec seulement les couleurs en plus (bleu et hover orange), et ça ne marche pas...

Edit 2 : oui, je précise que j'ai bien inclus le fichier jquery.js lol

Edit 3 : le problème doit venir de ma CSS ^^ je vois dans le code source qu'au clic, la classe se met bien en "menutop selected", comment je l'écris dans ma CSS ? Avec un point devant, sans rien, avec menutop en parent... ? Merci

Edit 4 : j'ai trouvé ! Chez moi ça donnait (attention les yeux)

a#index-submenu-webdesign.menutop.selected {
	color:#F90;
}

Merci à toi titchagcreation ! =D Sujet résolu !
Modifié par LightBen (05 Dec 2011 - 01:56)