Jump to content

Code for active menu item works great on one site but not another...

Recommended Posts

Hello All, I've been having an issue with getting this code to work on one site that was copied from another site that it works fine on. The code is basically to make the main navigation button show an "active" style to reflect what page (section/page) your on. The site I'm trying to get it work on now is: http://mototrbo.spcomm.com and this is the code I'm using: <script> $(function () { setNavigation(); }); function setNavigation() { var path = window.location.pathname; path = path.replace(//$/, ""); path = decodeURIComponent(path); $("#menu a").each(function () { var href = $(this).attr('href'); if (path.substring(0, href.length) === href) { $(this).closest('li').addClass('current-menu-item'); $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); } }); }</script>


Any thoughts and/or help would be greatly appreciated!


Thanks in advance,


Link to post
Share on other sites

That code expects a particular HTML structure, so I'm guessing you don't have that structure on the page where you're trying to use it. Maybe you forgot to include jQuery also. Look for error messages in your browser's console.

Link to post
Share on other sites

I'm not sure I'm following about the HTML structure. Everything on the page (as far as I can tell) is setup pretty much the same as the site that the code is working on. I also have this script right above the previously provided code:


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>


I have tried to include a different jQuery file and script with no luck.

Link to post
Share on other sites

Everything on the page (as far as I can tell) is setup pretty much the same

"Pretty much" might not cut it. Look at what the code is looking for.
        $("#menu a").each(function () {            var href = $(this).attr('href');            if (path.substring(0, href.length) === href) {                $(this).closest('li').addClass('current-menu-item');                $('li.current-menu-item').parents().not('ul').addClass('current-menu-item');            }        });
It looks for an element with the ID "menu", which contains a elements. It gets those and loops through them. It gets the href of each one and compares it with the path in the URL (so those need to match - the href links need to contain the correct path). If it matches, then it looks for the closest li element and adds a class to it, then it gets that same element (li.current-menu-item), gets parent elements that are not ul elements, and adds the current-menu-item class to them also. So, if your page has a different structure then that code is obviously not going to do the same thing to it.If you think that this if statement is not matching:
if (path.substring(0, href.length) === href)
Then verify what it is checking:
console.log('href: ' + href);console.log('path: ' + path.substring(0, href.length));if (path.substring(0, href.length) === href)
Link to post
Share on other sites

I believe everything is good with the structure. They both pretty look like this:


<ul id="menu"> <li class="drop"><a href="/about-us/index.htm">About Us</a> <ul> <li><a href="page.htm">


And the id and class names are either the same or are correct and match the menu. I'm pretty much stumped here.

Link to post
Share on other sites

Well, either add some breakpoints to the code and step through it, or add some console.log statements to have it print everything out so that you can verify what it's doing. Make sure that $("#menu a") is returning a list of elements, and inside that loop print out everything that it is using or checking. When in doubt, just verify what the code is actually doing when it runs.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...