Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1353
  • Last Modified:

Highlight current menu item with Jquery only

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
LZ1
Asked:
LZ1
  • 4
  • 3
  • 2
1 Solution
 
mihnea2005Commented:
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
 
LZ1Author Commented:
So will this completely replace all of my current jquery?
0
 
mihnea2005Commented:
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
Industry Leaders: 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!

 
khan_webguruCommented:
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
 
khan_webguruCommented:
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
 
khan_webguruCommented:
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
 
LZ1Author Commented:
@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
 
khan_webguruCommented:
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
 
LZ1Author Commented:
Perfect! Thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now