Make active links with jQuery?

Question

I am making active link with jQuery like this

$(document).ready(function() {
    var url = window.location.href;

    $(".main-navigation ul li a").each(function() {
      var $this = $(this);

        var href = $this.attr("href");

        if (url === href) {

            $this.css({
                'color': '#666666',
                'font-weight': 'bold',
            }).addClass('active').removeAttr("href").removeAttr("onclick");         
        }           
    });

The only problem is here that my a href goes like this /Settings/File?id=333

And url wil be something like this

http://www.example.com/Settings/File?id=333

Then the a href and ulr does not match, how to delete http and example for url and check with a href?

This is working ok, the problem is with http://www.example.com — Schneider, Jul 28 '14 at 07:50
possible duplicate of [Get pathname from href in Javascript](http://stackoverflow.com/questions/3807674/get-pathname-from-href-in-javascript) — Sky Voyager, Jul 28 '14 at 08:16

score 1 · Accepted Answer · answered Jul 28 '14 at 08:03

First: if you are going to give them a class anyway, don't put extra inline CSS there...

And here a snipper that should work...

var uri = window.location.href;
$(".main-navigation ul li a").filter(function() {
    return (this.href == uri || uri.substr(0,this.href.length + 1) == this.href + "?");
}).css({
    'color': '#666666',
    'font-weight': 'bold',
}).addClass('active').removeAttr("href").removeAttr("onclick");

score 0 · Answer 2 · edited May 23 '17 at 10:27

0

To get /Settings/File?id=333 use :

$this[0].pathname;

Get pathname from href in Javascript

Location pathname Property

edited May 23 '17 at 10:27

Community

1
1

answered Jul 28 '14 at 07:53

Sky Voyager

11,413
4
45
70

This is ok, when i have .com, the problem is that i dont know it will be .com – Schneider Jul 28 '14 at 08:02
window.location.pathname gives you JUST the path :-) – DoXicK Jul 28 '14 at 08:03
@DoXicK and to `$this.attr("href");` ? – Sky Voyager Jul 28 '14 at 08:09
split it at the first / after http(s):// – DoXicK Jul 28 '14 at 08:13
@Schneider see my edit use [Location pathname Property](http://www.w3schools.com/jsref/prop_loc_pathname.asp). – Sky Voyager Jul 28 '14 at 08:13

hansn · Answer 3 · 2014-07-28T08:03:53.603

0

You want to change http://www.example.com/Setting/File?id=333 into /Setting/File?id=333?

var url = window.location.href.split('.com').pop();

If you don't know if it's a .com website, try this:

function getLocation(url) {
    var el = document.createElement("a");
    el.href = url;
    return el.pathname;
}

var url = getLocation(window.location.href);

edited Jul 28 '14 at 08:03

answered Jul 28 '14 at 07:54

hansn

1,816
1
15
31

Ok, but the problem is .com?? I dont know it wolud be .com? – Schneider Jul 28 '14 at 07:58

voigtan · Answer 4 · 2014-07-28T08:14:37.093

you could use the native a element DOM and its href it will give the full url:

$(function(){
  var url = window.location.href;

  $(".main-navigation ul li a").each(function() {
    if (url === this.href) {
      $(this).css({
        'color': '#666666',
        'font-weight': 'bold',
      }).addClass('active').removeAttr("href").removeAttr("onclick");
    }
  });
});

example on jsbin (first item in the list has the same url without the domain)

Make active links with jQuery?

4 Answers4