Solved

Help with active link sprite nav

Posted on 2013-02-01
6
236 Views
Last Modified: 2013-03-04
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
0
Comment
Question by:nickinthooz
  • 3
  • 2
6 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38845099
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
 
LVL 16

Expert Comment

by:HagayMandel
ID: 38845300
a
0
 
LVL 6

Author Comment

by:nickinthooz
ID: 38845346
no go chris.  I added the selector and it still isn't working.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 38845416
Here's a working demo. Have a play and let me know if you get stuck:

http://jsfiddle.net/ChrisStanyon/4r5vg/
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38845437
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
 
LVL 16

Accepted Solution

by:
HagayMandel earned 250 total points
ID: 38845451
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now