nickinthooz
asked on
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?
my html
and my css:
Please let me know what i'm doing wrong
$('navlist a').click(function() {
$('navlist a').removeClass('selected');
$(this).addClass('selected');
}
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>
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; }
Please let me know what i'm doing wrong
a
ASKER
no go chris. I added the selector and it still isn't working.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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 ;)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
$('#navlist a')