jquery – ¿Cómo resaltar un enlace de menú cuando se hace clic?

Tengo un menú con enlaces. Los enlaces se colocan dentro de una mesa. Cada enlace se coloca en un

. Quiero cambiar el color de fondo de

cuando

activo. ¿Cómo lo voy a hacer en jquery?

Aquí está el enlace a mi código: http://jsfiddle.net/DdG8m/ .

Mi problema es que si se hace clic en uno de los enlaces, cambia el color de fondo de toda la tabla. Por favor ayuda. Gracias por adelantado.

Debe referirse al elemento actual y no a todos los elementos que coincidan con su selector.

 $("#mainMenu td").click(function() { $(this).css('background-color', '#EDEDED'); }); 

También te recomiendo que uses clases CSS en lugar de configurar las propiedades CSS de esta manera.

Eso sería algo así como;

 $("#mainMenu td").click(function() { $(this).addClass('selected'); }); 

Juntos con;

 #mainMenu td.selected { background-color: #EDEDED; } 

EDITAR

El selector de psuedo :visited solo debe usarse en los enlaces ( a ) y no debe usar table más de lo que realmente necesita.

Creó un jsFiddle que usa una lista ul lugar de la tabla y display: block en los enlaces para llenar todo el elemento li principal.

También estoy usando event.preventDefault () para no seguir el enlace, ya que esto probablemente volvería a cargar la página y no incluiría la clase para el enlace seleccionado / activo. Si desea seguir el enlace y volver a cargar la página, debe usar el código del lado del servidor para representar ese HTML.

 $("#mainMenu a").click(function(e) { e.preventDefault(); // Don´t follow the link $("#mainMenu a").removeClass('selected'); // Remove class on all menu items $(this).addClass('selected'); // Add class to current menu item }); 

Cree una clase llamada .highlight y .highlight con el color de fondo deseado, luego agregue / elimine la clase en consecuencia: http://jsfiddle.net/DdG8m/4/

 $(function() { $('#mainMenu td').click(function(e) { $('#mainMenu td').removeClass('highlight'); $(this).addClass('highlight'); }); }); 

Nota: deberá usar !important en su clase .highlight para anular las predeterminadas.

Tu código actual es

 $(function() { $("#mainMenu td").click(function() { $("#mainMenu td").css('background-color', '#EDEDED'); }); });​ 

Eso cambiará todos los tds en la tabla. En su lugar, use $(this) dentro de su función para seleccionar el elemento que activó el evento de clic.

 $(function() { $("#mainMenu td").click(function() { $(this).css('background-color', '#EDEDED'); }); });​ 

Para hacer que los otros vuelvan, use el selector de siblings() para seleccionar todos los tds, excepto el clic.

 $(function() { $("#mainMenu td").click(function() { $(this).css('background-color', '#EDEDED') .siblings().css('background-color', '#FFFFFF'); }); }); 

Prueba esto:

 $(function() { $('td').click(function() { $(this).css('backgroundColor', '#EDEDED'); }); });