2

I got this jQuery script that's supposed to add the class "active" to my li's, but it doesn't. The script is as follows:

jQuery(function() {
 var pgurl = jQuery(location).attr('href');
 console.log(pgurl);
 jQuery("ul.pagesubmenu-ul li a").each(function(){
      if(jQuery(this).attr("href") == pgurl)
      jQuery(this).parent().addClass("active");
 })

});

I really don't know why it isn't working. I'm trying to use it on this page (In the subnav below the main navigation).

Thanks in advance!

bjarkof
  • 79
  • 8
  • Are you sure `href` attribute has similar url as `location` object, usually href tags doesn't contain domain names(for relative path) – Medet Tleukabiluly Oct 07 '15 at 20:38
  • First, check that the if condition will be executed. Check that in debug or add alert to if condition to be sure that the code jQuery(this).parent().addClass("active"); is executed – Ahmed Shamel Oct 07 '15 at 20:39

3 Answers3

4

instead of looping all your links, you can directly select it with jquery by its href attribute:

$(function() {
    $("a[href='" + location.href + "']").parent().addClass('active');
});

Note that location.href will return the full url, with host and scheme, if you are using relative urls in your site:

$(function() {
    $("a[href='" + location.pathname + "']").parent().addClass('active');
});

Also, you can use some characters as wildcards:

= is exactly equal
!= not equal
^= starts with
$= ends with
*= contains
~= contains word
|= starts with prefix
taxicala
  • 21,408
  • 7
  • 37
  • 66
1

It's not getting an exact match on any of those links. pgurl is showing http://xn--fnpark-pua9l.dk/konference-ny/, however the <a> tags don't have the trailing slash (http://xn--fnpark-pua9l.dk/konference-ny). Try cleaning up the url before comparing the strings. Here is a thread that will allow you to do that: https://stackoverflow.com/a/2541083/5169684

Community
  • 1
  • 1
Adam Mazzarella
  • 763
  • 1
  • 7
  • 14
  • That makes sense! Thanks a lot for your reply! I'm gonna mark this one as the correct one, as this is the reason it's not working :) – bjarkof Oct 07 '15 at 20:59
  • 1
    I'm glad I could help. I'd recommend you check into some of the other answers as well. The methods mentioned may make your code more readable in the long-run. – Adam Mazzarella Oct 07 '15 at 21:06
  • 1
    I'm gonna use the method taxicala suggested. Way cleaner and better than my own code! :) – bjarkof Oct 07 '15 at 21:07
0

Why not working? Can you do a jsfiddle with your navigation structure...

HTML

<ul class="page"> <li><a href="1">Link</a> <ul class="subpage"> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> <li><a href="#">Sub Link</a></li> </ul> </li> <li><a href="2">Link</a></li> <li><a href="3">Link</a></li> <li><a href="4">Link</a></li> <li><a href="5">Link</a></li> </ul>

JQUERY

jQuery(function() { $("ul.page li ul.subpage li a").each(function(){ $(this).addClass('active'); }); });

https://jsfiddle.net/xp315ydq/

fabiovaz
  • 516
  • 2
  • 9