Solved

Highlight current menu item with Jquery only

Posted on 2011-03-21
9
1,343 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
  • 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

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!

Join & Write a Comment

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

708 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

18 Experts available now in Live!

Get 1:1 Help Now