CODEWITHSUNDEEP
htmlcss
Hellodan
Hellodan

Reputation: 1208

selected page link issue

Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.

Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.

http://jsfiddle.net/4kUp3/

Upvotes: 1

Views: 70

Answers (3)

Tron
Tron

Reputation: 1

You have it setup correctly, the order on your CSS is just messed up a bit.

Change 

.selected_link li a:link

to 

.selected_link a:link

and HOME will be blue.

Upvotes: 0

calebds
calebds

Reputation: 26228

You could compare each link in the menu with the current page URL. With jQuery:

$('#site_nav li a').each(function(){
    if($(this).attr('href') === window.location.href) {
        $(this).parent().addClass('selected_link');  // apply style to li
    }    
});

Upvotes: 0

Will P.
Will P.

Reputation: 8787

If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style

$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');

Upvotes: 1

Related Questions