Solved

Menu Active Tab using javascript

Posted on 2013-02-06
7
394 Views
Last Modified: 2013-02-06
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
Comment
Question by:nickinthooz
7 Comments
 
LVL 16

Expert Comment

by:Steve Krile
ID: 38859854
What is the behavior you are trying to fix?
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38859856
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
 
LVL 6

Author Comment

by:nickinthooz
ID: 38859938
that's because I'm playing with it as we speak
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 6

Author Comment

by:nickinthooz
ID: 38859942
I'm trying to keep the active tab until a different page is clicked.
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 38860304
The CSS that effects the 'selected' class is commented out, so it has no effect!
0
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 38860382
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
 
LVL 6

Author Closing Comment

by:nickinthooz
ID: 38862156
This is what I was looking for.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
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…

829 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