Solved

Highlight current menu item with Jquery only

Posted on 2011-03-21
9
1,349 Views
Last Modified: 2012-05-11
Hey Experts!!

I'm still learning Jquery so be gentle.  I have a script where I AJAX in content from a page via the URL and a hash tag.  What I want to do now is now highlight the current menu li and the a tag as I have CSS applied to both items that corresponds with the page that's being called via the URL hash tag.  

You can see the live page here: http://rdsrc.us/aXryPq 

I've attached the script below.  I've gotten these scripts from other places on the internet, so I'm hoping I'm not too far off.  The 2nd half of the code is where I was attempting to highlight the menu items.
<script type="text/javascript" >
$(document).ready(function() {
						   
	var hash = window.location.hash.substr(1);
	var href = $('#nav li a').each(function(){
		var href = $(this).attr('href');
		if(hash==href.substr(0,href.length-5)){
			var toLoad = hash+'.html #slide-container';
			$('#slide-container').load(toLoad)
		}											
	});

	$('#nav li a').click(function(){
								  
		var toLoad = $(this).attr('href')+' #slide-container';
		$('#slide-container').hide(loadContent);
		window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
		function loadContent() {
			$('#slide-container').load(toLoad,'',showNewContent())
		}
		function showNewContent() {
			$('#slide-container').fadeIn();
		}
		function hideLoader() {
			$('#slide-container').fadeOut();
		}
		return false;		
	});

        //########START HERE###########

	// store url for current page as global variable
	    current_page = window.location.hash;
    // apply selected states depending on current page
	    if (current_page.match(/why/)) {
		   $("#nav ul   :eq(0)").addClass('current');
	    } else if (current_page.match(/program/)) {
		   $("#nav ul   :eq(1)").addClass('current');
	    } else if (current_page.match(/financial-aid/)) {
		   $("#nav ul   :eq(2)").addClass('current');
	    } else if (current_page.match(/student-services/)) {
		   $("#nav ul   :eq(3)").addClass('current');
	    } else if (current_page.match(/graduate-services/)) {
		   $("#nav ul   :eq(4)").addClass('current');
	    } else { // don't mark any nav links as selected
		   $("#nav ul li ").removeClass('current');
	    };
});
</script>

Open in new window

0
Comment
Question by:LZ1
[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
  • 4
  • 3
  • 2
9 Comments
 

Expert Comment

by:mihnea2005
ID: 35181435
hi

from what i see u have a class on #slide-container wich tels u what is loaded inside .. but u dont have a class on your menu items ..

if u place a class on the menu items <li class="why"></li> <li class="program"></li> ..  etc . then u can check if the new loaded container has same class as menu item ..



// for adding class when u click e menu item
$('#nav li a').click(function(){
  $('#nav li').removeClass('current');
  $(this).parent().addClass('current');
}

// for adding class when u refresh and content is loaded automaticaly 
if(hash==href.substr(0,href.length-5)){
  var toLoad = hash+'.html #slide-container';
  $('#slide-container').load(toLoad);

  current_class = $('#slide-container').attr('class');
  $('#nav li'+current_class).addClass('selected');
}

Open in new window

0
 
LVL 30

Author Comment

by:LZ1
ID: 35181495
So will this completely replace all of my current jquery?
0
 

Expert Comment

by:mihnea2005
ID: 35181527
nop ..add the new code

  current_class = $('#slide-container').attr('class');
  $('#nav li'+current_class).addClass('selected');
after line 9 .. and put ;


and
  $('#nav li').removeClass('current');
  $(this).parent().addClass('current');
after line 14


but u should add those classes to list items of it wont work
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 10

Expert Comment

by:khan_webguru
ID: 35181660
Hello Bro,

This is very simple just add these two lines in "$('#nav li a').click(function(){" function.......


 
$(".current").removeClass('current');
$(this).addClass('current');

Open in new window


This will de-select previous selected and select newly clicked.

And you can also do the following

 
$("#nav ul li").each(function(index) {
    $(this).removeClass('current');
});

Open in new window


But first solution is fast and accurate.

hope this will solve your problem.

Regards,

Asif Ahmed Khan
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35181692
Hello Bro!

I applied these two lines in your given "Web Page" with the help of development tool bar it works fine so go for these one....................

 
$(".current").removeClass('current');
$(this).addClass('current');

Open in new window



CHEERS,

Regards,

Asif Ahmed Khan
0
 
LVL 10

Expert Comment

by:khan_webguru
ID: 35181785
Hello Bro!

As you wrote you are in learning phase of JQuery so please find the link below that will help you a lot in problem solving. Although I have more then 3 years of experience in JQuery but get help from this.

http://woorkup.com/wp-content/uploads/2011/02/jQuery-1.5-Visual-Cheat-Sheet.pdf

Regards,

Asif Ahmed Khan
0
 
LVL 30

Author Comment

by:LZ1
ID: 35183605
@khan: Your first solution worked, but only on the <a> which turns the font white.  I need the <LI> background to change the class too.........any suggestions?
0
 
LVL 10

Accepted Solution

by:
khan_webguru earned 500 total points
ID: 35183923
Hello Bro!

Happy to hear that this helped you sure this is not a problem just do the same. Please add the following one line to fix your problem.

Just add this line in "$('#nav li a').click(function(){" function......

 
$(this).parent("li").addClass("current");

Open in new window


Please also find the attachment I just apply this TAG into you web page with the help of development tool bar and got the result that is in attached image.

This is a screen short of your web page it will look like this by adding this line.

Hope now your problem will solve 100%

Regards,

Asif Ahmed Khan
0
 
LVL 30

Author Closing Comment

by:LZ1
ID: 35184219
Perfect! Thanks!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Introduction HyperText Transfer Protocol (http://www.ietf.org/rfc/rfc2616.txt) or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

724 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