• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 403
  • Last Modified:

Menu Active Tab using javascript

I continue to have problems with getting my sprite to display correctly.  The site I'm working on is:

http://pvcc.inthooz.me/

Here's my javascript

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

Open in new window


My html:
 
  <div class="sprite">
					  <ul id="navlist">
							 <li id="home" ><a class="nav"  href="/" ${page == '/home/' ? 'class="active"' : ''}"></a></li>
							  <li  id="about" ><a class="nav" href="/about-us/" ${page == '/about-us/' ? 'class="active"' : ''}"></a></li>
							  <li  id="new"><a class="nav" href="/new/"></a></li>
							  <li  id="ministries"><a class="nav" href="/ministries/"></a></li>
							  <li  id="mission"><a class="nav" href="/missions/"></a></li>
							  <li  id="watch"><a class="nav" href="/watch-listen/"></a></li>
							  <li  id="members"><a class="nav" href="/members/"></a></li>
							  <li  id="contact"><a class="nav" href="/contact-us/"></a></li>
							   
					  </ul>
			    </div>

Open in new window


My Css:
#navlist li, #navlist a{height:66px;display:inline-block;}
 
#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:active { background: url(images/nav-sprite.png) no-repeat -16px -132px; width: 78px; height: 66px; }
#home a.selected { 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.selected { background: url(images/nav-sprite.png) no-repeat -101px -132px; width: 94px; height: 66px; }

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

Open in new window



Thanks in advance.
0
nickinthooz
Asked:
nickinthooz
1 Solution
 
Steve KrileCommented:
What is the behavior you are trying to fix?
0
 
LZ1Commented:
The jquery you posted here is different from what you have on your page:

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

Open in new window


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

Open in new window

Here:
0
 
nickinthoozAuthor Commented:
that's because I'm playing with it as we speak
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
nickinthoozAuthor Commented:
I'm trying to keep the active tab until a different page is clicked.
0
 
Chris StanyonCommented:
The CSS that effects the 'selected' class is commented out, so it has no effect!
0
 
LZ1Commented:
In order to do what your trying to do, your going to have to do one of 2 things:
1. Read the URL into the Javascript so you know what page your on
OR
2. Use server side scripting to determine the page your on

When a user clicks on the menu item, all your doing is adding and removing a class. That won't persist to the next page because the user hasn't clicked on the nav on that page yet.
0
 
nickinthoozAuthor Commented:
This is what I was looking for.
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.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now