If current page url

petewinter
petewinter used Ask the Experts™
on
My code to add a class based on the current page is not working. Can you help me work out why?

 $(document).ready(function() {

$(function(){

    var url = window.location.pathname, 
        urlRegExp = new RegExp(url.replace(/\/$/,'') + "$"); // create regexp to match current url pathname and remove trailing slash if present as it could collide with the link in navigation in case trailing slash wasn't present there
        // now grab every link from the navigation

		$('.sub_nav a').each(function(){
            // and test its normalized href against the url pathname regexp
            if(urlRegExp.test(this.href.replace(/\/$/,''))){
                $(this).addClass('sub_nav_active');
            }
        });

});
	
	   });

Open in new window


See this url: http://new2.jensonfisher.com/about-us/values/

Look at the sub navigation below the image.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
For one your code structure is a bit odd

$(document).ready(function() {
$(function(){
...

Open in new window

These are effectively the same - use one or the other - not both
$(function() {
...
});

Open in new window


This does not make sense - why are you using RegEx on a static string - when an '==' will do the same thing?
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$")

Open in new window


Here is a stab at doing what you want
$(function() {
  // Get the pathname
  var url = window.location.pathname;

  // If the last char is a '/' then strip it 
  url = (url.substr(-1) === '/') ? url.slice(0, url.length-1) : url;

  // Match the <a> with an href attr that matches the url
  $('a[href="' + url +'"]').addClass('sub_nav_active');
});

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The sample code below demonstrates the concept - working version here
HTML
      <div class="sub_nav">
        <ul>
           <li><a href="/aboutus/values">Values</a></li>
           <li><a href="/aboutus/diversity">Diversity</a></li>                 
        </ul>
      </div> 

Open in new window

JavaScript
$(function() {
  $('.tester').click(function(e) {
    e.preventDefault();
    url = $('#url').val();
	url = (url.substr(-1) === '/') ? url.slice(0, url.length-1) : url;
    $('.sub_nav_active').removeClass('sub_nav_active');
    $('.sub_nav a[href="' + url +'"]').addClass('sub_nav_active');
  });
});

Open in new window

Author

Commented:
Thanks, but it doesn't seem to work for me. What have I done wrong on this page...

http://new2.jensonfisher.com/about-us/values/

this is the script in the page: http://new2.jensonfisher.com/wp-content/themes/jensonfisher/js/jf-scripts.js
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
about-us <> aboutus

Your subnav code - no hypen in aboutus
<ul>
  <li><a href="/aboutus/values">Values</a></li>
  <li><a href="/aboutus/diversity">Diversity</a></li>	        			 
</ul>

Open in new window

Author

Commented:
Such a silly mistake! Thanks for your help.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial