li menu a besoin de classe de “sélectionné”

Je vois plusieurs modifications ici.

Tout d’abord, lorsque vous appliquez la classe sélectionnée, vous appliquez à tous les éléments li , ce qui n’est pas vrai. vous voulez seulement appliquer la classe à l’élément de la liste cliqué.

Deuxièmement, lorsque vous cliquez sur un autre élément de la liste, vous souhaitez supprimer la classe sélectionnée.

donc le code modifié serait:

 $('#navigation li').click(function() { $('#navigation li').removeClass('selected'); $(this).addClass('selected'); }); 

Plus important encore, vous n’avez pas de classe selected . Je mets une définition de classe sélectionnée temporaire comme suit:

 .selected{ border: 1px solid #888; background-color: #white; 

}

Vous pouvez voir un exemple de travail ici: sur JsFiddle

En outre , votre élément a un fond gris. vous voudrez peut-être aussi appliquer la classe de fond blanc sélectionnée à votre élément .. quelque chose comme:

 $('a', this).addClass('selected'); //apply to anchor element also 

et lorsque vous supprimez la classe, suivez la même affaire.

Vous souhaitez donc conserver les états des boutons sur différentes pages. Javascript n’est valable que tant que la page est ouverte. Dès que l’utilisateur accède à la nouvelle page, tout le javascript sera réinitialisé. Pour surmonter cela, vous pouvez faire l’une de ces deux choses:

1) Si vous utilisez une page maître pour le menu, ajoutez l’atsortingbut runat="server" à vos éléments de liste et, à partir du code suivant, ajoutez la classe sélectionnée à l’élément de liste approprié de votre page enfant (vous pouvez éventuellement avoir une fonction publique dans votre page maître)

  //Master page public SetHomeMenu() { liHome.Atsortingbutes.Add("class","selected"); } //in Child page Master.SetHomeMenu(); 

2) Si vous voulez le faire en javascript, vous devez lire votre URL, l’parsingr, puis append la classe selected à la

 //put this javascript in your head section or even at the bottom, just before closing // body tag  $(document).ready(function () { if(window.location.href.indexOf("home")) { $("#navigation li#home").addClass("selected"); } else if(window.location.href.indexOf("about")) { $("#navigation li#about").addClass("selected"); } else if(window.location.href.indexOf("contact")) { $("#navigation li#contact").addClass("selected"); } }); 

Mais pour que cela fonctionne, vous devez append des atsortingbuts id à vos éléments de liste, comme ceci:

 
 
HOME
 
ABOUT
 
CONTACT
  

Pour utiliser la dernière solution, vous devez modifier l’instruction if en cet exemple:

if (window.location.href.indexOf (“home”)> -1)

Comme d’autres ont déclaré que vous n’avez pas de classe .selected, votre js définira tous les éléments li comme sélectionnés lorsque vous cliquez dessus, vous souhaiterez peut-être le changer en deuxième ligne.

 $('#navigation li').click(function() { $(this).addClass('selected'); }); 

Cela le ferait. Vous avez oublié de définir la classe sélectionnée css

http://fiddle.jshell.net/54uDQ/

La partie importante est ce css

 #navigation a:hover, #navigation a.selected { background: url('http://soffr.miximages.com/jquery/2iih9c9.png') no-repeat scroll 0 0 transparent; color: #000000; height: 43px; list-style: none outside none; padding-left: 10px; text-decoration: none; width: 116px; text-align:center } 

 #navigation li.a.seletected a.seletected { background: white; // or background Image or whatever it is your doing to make this white. } 

Vous n’avez même pas défini de classe pour ‘sélectionné’ dans votre CSS.

Ajoutez ceci et cela devrait fonctionner.

 #navigation li .selected { [CSS to make white background here.] } 

Autant que je sache à partir de votre CSS, vous n’avez défini aucun style pour la classe selected .

Assigner cette classe à votre li n’est pas suffisant. Vous devez également styliser la classe de la manière que vous souhaitez.

 .selected{ background-color:#fff; } 

(etc)

1. Vous n’avez pas de css pour ‘.selected’. Alors, ajoutez le style pour rendre le bouton blanc.

2. Votre jQuery est incorrect. Dans la fonction de clic, ciblez ‘ceci’ car cela cible l’élément spécifique sur lequel vous avez cliqué.

    $('#navigation li').click(function(event) { $(this).addClass('selected'); });