Help with active link sprite nav

I've got to be doing something wrong.  I have a nav sprite that has a a, a:hover, and a.selected state.  What am I doing incorrect?

$('navlist a').click(function() {
    $('navlist a').removeClass('selected');
    $(this).addClass('selected');
}

Open in new window


my html

<ul id="navlist">
							 <li id="home"><a  class="nav" href="/home/" ${page == '/home/' ? 'class="active"' : ''}"></a></li>
							  <li  id="about" class="nav"><a  href="/about-us/" ${page == '/about-us/' ? 'class="active"' : ''}"></a></li>

Open in new window


and my css:

#home a:link { background: url(images/nav-sprite.png) no-repeat -16px 0; width: 78px; height: 66px; }
#home a:hover { background: url(images/nav-sprite.png) no-repeat -16px -66px; width: 78px; height: 66px; }
#home a.nav:active, a:focus { background: url(images/nav-sprite.png) no-repeat -16px -132px; width: 78px; height: 66px; }
#home a.active { background: url(images/nav-sprite.png) no-repeat -16px -132px; width: 78px; height: 66px; }

#about a:link { background: url(images/nav-sprite.png) no-repeat -101px 0; width: 94px; height: 66px; }
#about a:hover { background: url(images/nav-sprite.png)  no-repeat -101px -66px; width: 94px; height: 66px; }
#about a:active { background: url(images/nav-sprite.png) no-repeat -101px -132px; width: 94px; height: 66px; }
#about a.active { background: url(images/nav-sprite.png) no-repeat -101px -132px; width: 94px; height: 66px; }

Open in new window

                                   
Please let me know what i'm doing wrong
LVL 6
nickinthoozAsked:
Who is Participating?
 
HagayMandelConnect With a Mentor Commented:
0
 
Chris StanyonCommented:
jQuery uses the same selectors as CSS so you need to include the # for IDs and the . for classes. Your code needs to select the A like so:

$('#navlist a')
0
 
HagayMandelCommented:
a
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
nickinthoozAuthor Commented:
no go chris.  I added the selector and it still isn't working.
0
 
Chris StanyonConnect With a Mentor Commented:
Here's a working demo. Have a play and let me know if you get stuck:

http://jsfiddle.net/ChrisStanyon/4r5vg/
0
 
Chris StanyonCommented:
Just had another look at your code. Your jQuery is adding a class called 'selected' but your CSS styles a class called 'active'. Maybe that's the problem ;)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.