3

This simple script adds an "active" class to a link in a list when page's url is = link's href attribute

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a').each(function(){
 var Link  = $(this).attr('href');
      if (Link == HeRe){ $(this).addClass('active');}
 });

And it works. But ... only when the href attribute is just a single file href="index.html". Doesn't work at all in these next cases or similar:

<a href="foo/index.html">foo</a>
<a href="../bar/index.html">bar</a>

Actually to solve it I could write:

 var TheP = window.location.pathname.split('/');
 var P1   = TheP[TheP.length-1];
 var P2   = TheP[TheP.length-2];
 var HeRe = P2+"/"+P1;

 $('ul a').each(function(){
  var Ln = $(this).attr('href');
  var Ln = Ln.split('/');
  var L1 = Ln[Ln.length-1];
  var L2 = Ln[Ln.length-2];
  var Link = L2+"/"+L1;
      if (Link == HeRe){$(this).addClass('active');}
 });

But ... ehm ... I think there should be a better and more flexible way. Also because what is above doesn't work having just a single file as path : (

1
  • @user: Updated my answer, I misunderstood the question at first (although it's actually fairly clearly written). May 10, 2011 at 14:04

3 Answers 3

4

Update: I misunderstood the question originally. Re-reading it, it sounds like you want to be sure not to match all index.htmls, but only the specific one you're in (which makes rather more sense, actually).

In that case, you can do this:

var path = window.location.href; // Just grabbing a handy reference to it
$('ul a').each(function() {
    if (this.href === path) {
        $(this).addClass('active');
    }
});

...because the href property (which is not the same as the "href" attribute) of the DOM element is the absolute path.

Live example

Obviously, the more you can do to constrain that initial selector (within reason), the better. For instance, if this is all within some navigation structure, only working within that structure will be more efficient.

Also, if there will be a lot of matches, you can avoid doing the jQuery wrapper when adding the class if you like:

    if (this.href === path) {
        this.className += " active"; // note the space
    }

Original answer:

If the href attributes will always have a / before the filename part, then:

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"]').addClass('active');

That uses an attribute ends-with selector to find the relevant links.

If the href attributes may sometimes be simply index.html or similar, you can do this:

var TheP   = window.location.pathname.split('/');
var HeRe   = TheP[TheP.length-1];
$('ul a[href$="/' + HeRe + '"], ul a[href="' + HeRe + '"]').addClass('active');

...which will catch the ones with / in front of them using the "ends-with" selector, and also the ones where there's an exact match using the "equals" selector.

2
  • J. ... thanks and sorry for my english, I've seen your kind Live example and yes it works. But it's not useful if you have hrefs like these: href="../A/index.html" or href="../B/index.html" and so on. Because my two scripts work, but they work separately. I would like ONLY ONE script instead, to match the correct hrefs having a menu with "index.html" and "foo.html" or "../A/index.html" and "../B/index.html" or even "../A/B/index.html" and "../B/B/index.html" where the relevant parts could be different.
    – Steve
    May 10, 2011 at 15:35
  • @user: (Your English seems fine.) I'm not sure I understand, the reason I'm using the href property instead of the "href" attribute is that it won't be relative. By the time the DOM is parsed, if you have a <a href="../A/index.html"> in a page at http://example.com/foo/B/nifty.html, the href property on the DOM element for that anchor will be http://example.com/foo/A/index.html. The property is a fully-resolved absolute path. Since we compare that with window.location.href, which is also an absolute path, we can use ===. May 10, 2011 at 15:45
0

Rather than break up the pathname why don't you just compare the whole thing. If you have relative urls it should be easy. Also, you can perform a replace to deal with absolute urls.

var mainpart = window.location.protocol + "//" + window.location.host;
var path = '/' + window.location.pathname;
$('ul a').each(function(){
    var Link  = $(this).attr('href').replace(mainpart, '');
    if (Link === path || '/' + Link === path){ $(this).addClass('active');}
});
1
  • Thanks, but it's not what I need :/
    – Steve
    May 10, 2011 at 15:40
0
var TheP = window.location.pathname.split('/');
var HeRe = TheP[TheP.length-1];
$('ul a[href$="' + HeRe + '"]').addClass('active');

According to specification http://www.w3.org/TR/css3-selectors/#attribute-substrings :

Three additional attribute selectors are provided for matching substrings in the value of an attribute:

  • [att^=val] Represents an element with the att attribute whose value begins with the prefix "val". If "val" is the empty string then the selector does not represent anything.
  • [att$=val] Represents an element with the att attribute whose value ends with the suffix "val". If "val" is the empty string then the selector does not represent anything.
  • [att*=val] Represents an element with the att attribute whose value contains at least one instance of the substring "val". If "val" is the empty string then the selector does not represent anything.
1
  • .. interesting approach the CSS3 selectors. But using [href*= ] or [href$= ] you would get too many matches. Think the menu scenario with an href="../A/index.html" or href="../B/index.html"
    – Steve
    May 10, 2011 at 14:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.