li menu necesita clase de “seleccionado”

cuando el usuario haga clic en una pestaña del menú, quiero que permanezca seleccionado con un botón blanco.

Aquí está mi bash pero no funciona. Si hace clic en el botón de inicio, no permanece blanco.

html

 

css:

 body{ background-color:orange; } #navigation a { background: url("http://sofes.miximages.com/jquery/spxfdw.png") no-repeat scroll 0 0 transparent; color: #000000; height: 43px; list-style: none outside none; padding-left: 10px; text-align: center; text-decoration: none; width: 116px; } #navigation a span { padding-right: 10px; padding-top: 15px; } #navigation a, #navigation a span { display: block; float: left; } /* Hide from IE5-Mac \*/ #navigation a, #navigation a span { float: none } /* End hide */ #navigation a:hover { background: url('http://sofes.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 a:hover span { background: url(right-tab-hover.gif) right top no-repeat; padding-right: 10px } #navigation ul { list-style: none; padding: 0; margin: 0 } #navigation li { float: left; list-style: none outside none; margin: 0; } 

JS

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

¿algunas ideas?

Veo varias modificaciones aquí.

En primer lugar, cuando aplica la clase seleccionada, está aplicando a todos los elementos li , lo cual no es cierto. solo desea aplicar la clase al elemento de lista pulsado.

en segundo lugar, cuando hace clic en otro elemento de la lista, desea eliminar la clase seleccionada.

entonces el código modificado sería:

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

Lo más importante es que no tienes una clase selected . Pongo una definición de clase seleccionada temporalmente como tal:

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

}

Puedes ver un ejemplo de trabajo aquí: en JsFiddle

Además , su elemento tiene un fondo gris. así que es posible que también desee aplicar una clase seleccionada de fondo blanco a su elemento a … algo como:

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

y cuando elimines la clase, sigue el mismo trato.

Así que quieres mantener los estados de los botones en diferentes páginas. Javascript solo es válido mientras la página esté abierta. Tan pronto como el usuario vaya a la nueva página, se restablecerá todo javascript. Para superar esto puedes hacer una de estas dos cosas:

1) Si está utilizando una página maestra para el menú, agregue el atributo runat="server" a los elementos de su lista, y desde el código anterior, agregue la clase seleccionada al elemento de la lista correspondiente desde su página secundaria (puede ser que tenga una función pública en tu página maestra)

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

2) Si desea hacerlo en javascript, debe leer su url, analizarla y luego agregar la clase selected a li apropiado

 //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"); } }); 

Pero para que esto funcione, debe agregar atributos de id a los elementos de su lista, de esta forma:

  

Para usar la última solución, necesita cambiar la sentencia if a este ejemplo:

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

Como indicaron los demás, no tiene una clase .selected, su js establecerá todos los elementos li en cuando se haga clic en uno, puede cambiarlo en la segunda línea

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

Esto lo haría. Se te olvidó configurar la clase seleccionada css

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

La parte importante es este css.

 #navigation a:hover, #navigation a.selected { background: url('http://sofes.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. } 

Ni siquiera has establecido una clase para ‘seleccionado’ en tu CSS.

Agrega esto y debería funcionar.

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

Por lo que puedo decir de su CSS, no ha definido ningún estilo para la clase selected .

Asignar esa clase a tu li no es suficiente. También necesitas diseñar la clase de la manera que te gustaría.

 .selected{ background-color:#fff; } 

(etc)

  1. No tienes css para ‘.selected’. Por lo tanto, agregue el estilo para convertir el botón en blanco.

  2. Tu jQuery es incorrecta. En la función de clic, seleccione “esto” porque se dirige al elemento específico en el que hizo clic.

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