jquery - How to highlight a menu link when clicked?

Question

I have a menu with links. The links are placed inside a table. Each link is placed in a <td> . I want to change the background color of the <td> when its active. How am I gonna do it in jquery?

Here is the link to my code: http://jsfiddle.net/DdG8m/ .

My problem is that if one the links is clicked the background color of the whole table changes. Please help. Thanks in advance.

Answer 1

Create a class called .highlight and set it with the desired background color, then just add/remove the class accordingly: http://jsfiddle.net/DdG8m/4/

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

​note: you will need to use !important on your .highlight class to override any default ones.

Answer 2

You should refer to the current element and not all elements matching your selector.

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

I´d also recommend you to use CSS classes instead of setting the CSS properties this way.

That would be something like;

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

together with;

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

EDIT

The psuedo selector :visited should only be used on links ( a ) and you should not use table s more than you really need to.

Created a jsFiddle that uses an ul list instead of the table and display: block on links to fill the entire parent li element.

I´m also using event.preventDefault() to not follow the link as this probably would reload the page and not include the class for the selected/active link. If you want to follow the link and have the page reload you should use server side code to render that 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
});

Answer 3

Your current code is

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

});
​

That will change all tds in the table. Instead use $(this) inside your function to select the element that triggered the click event.

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

});
​

To make the other ones revert back, use the siblings() selector to select all tds except the clicked one.

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

Answer 4

Try this:

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