Solved

Help with active link sprite nav

Posted on 2013-02-01
6
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Introduction This article is intended for those who are new to PHP error handling (https://www.experts-exchange.com/articles/11769/And-by-the-way-I-am-New-to-PHP.html).  It addresses one of the most common problems that plague beginning PHP develop…
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

696 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