Jump to content

Mark navigation as active when on certain page


Recommended Posts



i'm a media designer with a very basic knownledge of JS. I have problem with a script on a website i created and would love some help...


Here is the situation:

In the main menu of my Wordpress website I have a page that includes three different profile pages that are reachable through another menu on this certain page. But the main menu topic doesn't show as active with this profile pages. These profiles create an URL like that: ?team=name.

My idea: to "addClass" the class "active" in the main menu topic (#menu-item-234) when this part "?team" is shown in the URL. I tried to code it but I'm not surprised it doesn't work... ;-) I don't really know what i'm doing ..Did I explain it understandable? Can someone help me, I would appreciate it very much..

  <script type="text/javascript">        $(document).ready(function(){            if ( document.location.hash === '?team' ) {            	$("#menu-item-234").addClass("active");			   } else if { document.location.hash !== '?team' } {				   $("#menu-item-234").removeClass("active");			   }		});</script>
Link to comment
Share on other sites

The hash property isn't what comes after the question mark, it's what comes after the hash symbol (#), e.g.:example.com/page.php?var=val#bookmarkHere's the reference for the location interface, it looks like you want the search property:https://developer.mozilla.org/en-US/docs/Web/API/Location

Link to comment
Share on other sites

Ok, thanks. I tried ... but put it in the wrong place? Is the structure right in the first place?

	<script type="text/javascript">            if ( window.location.search == "?team" ) {            	$("#menu-item-234").addClass("active");			   } else if { window.location.search !== "?team"} {				   $("#menu-item-234").removeClass("active");			   };	</script>		
Link to comment
Share on other sites

Hm ok.


The URL looks actually like this: domain.com/?team=firstname-name

And the print gives the same i have in the code: ?team=firstname-name

So I tried this also ...


(Does it have to be the whole string? Best be would with just the "/?team=" part)


Is there a problem with where it is located? In the <head> Tag is right?

Link to comment
Share on other sites

you can create a "toQuery" function whose job is to parse out the location.search text into an object:

var query = {string:window.location.search.substring(1),vars:{}};function toQuery(){    var kVpair, varArray = query.string.split("&");    for(var i=0;i<varArray.length;i++){        kVpair = varArray[i].split("=");        query.vars[kVpair[0]] = kVpair[1] | undefined;    }    };

then you can create a lookup table (LUT) so that the page knows which query variable affects which cell.

var activeLUT;$(document).ready(function(){    //link up the querynames to the elements they'll activate    activeLUT = {        "team":$("#menu-item-234"),        "_otheritem_":$("#some-other-element")    };   //populate the query object   toQuery();   //first remove any and all active classes on navigation elements   for(var key in activeLUT){      activeLUT[key].removeClass("active");   }   //going by reference in the query, grab each element in the LUT and activate classes   for(var key in query.vars){      if(activeLUT[key]!==undefined){         activeLUT[key].addClass("active");      }   }}

its usually best to stick as much of the javascript into the <head> tag as possible. its good practice to try and keep javascript mostly grouped and separate from the rest of the HTML. Its easier to maintain and cleaner to read through.


And ALWAYS place all <script> tags after all <style> tags. This is a more important optimization for larger, involved sites. If you have tons of javascript code before style tags a browser may hang as its trying to compute the javascript, leaving the page unstyled for a short time, or worse the CSS might never load. when browsers come to javascript they like to stop what ever else they are doing to "compile" and later run the code. This can block incoming bandwith thus slowing the load times of a page. placing scripts after styles allows them to download both in parallel.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...