Solved

Menu Active Tab using javascript

Posted on 2013-02-06
7
390 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
Comment Utility
What is the behavior you are trying to fix?
0
 
LVL 30

Expert Comment

by:LZ1
Comment Utility
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
Comment Utility
that's because I'm playing with it as we speak
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 6

Author Comment

by:nickinthooz
Comment Utility
I'm trying to keep the active tab until a different page is clicked.
0
 
LVL 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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
Comment Utility
This is what I was looking for.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

744 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

7 Experts available now in Live!

Get 1:1 Help Now