asked on

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

mihnea2005

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

LZ1

ASKER

So will this completely replace all of my current jquery?

mihnea2005

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

khan_webguru

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

khan_webguru

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

khan_webguru

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

LZ1

ASKER

@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?

ASKER CERTIFIED SOLUTION

khan_webguru

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

ASKER

Perfect! Thanks!