Solved

Help with active link sprite nav

Posted on 2013-02-01
6
235 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 42

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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 42

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 42

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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

746 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

10 Experts available now in Live!

Get 1:1 Help Now