How to use window.location to highlight the active menu item?

Question

I'm using following code of JQuery to add a class name to the active menu item according to the URL of the menu item:

var aurl = window.location.pathname;
$('.menu li a[href="'+aurl+'"]').parent('li').addClass('active');

The problem isn't in the code itself but it's in window.location.pathname.

It works when i set the URL as the following HTML code:

<ul>
  <li><a href='/'>home</a></li>
  <li><a href='/page1'>page 1</a></li>
  <li><a href='/page%202'>page 2</li>
</ul>

But it doesn't work when i set the URL as the following HTML code:

<ul>
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
</ul>

I need something instead window.location.pathname that can identify all these cases together.

Thank you

Update #1:

I have used 2 variables for the URL like this:

var aurl = window.location;
var burl = window.location.pathname;
$('.menu li a[href="'+aurl+'"],.menu li a[href="'+burl+'"]').parent('li').addClass('active');

It worked with all types but i still can't define the URL with space i have to replace it with %20 like:

<li><a href='/page 2'>page 2</li>

to be:

<li><a href='/page%202'>page 2</li>

try dump in console.log window.location object. It can tell you more info — daremachine, Mar 02 '15 at 02:18

score 2 · Accepted Answer · answered Mar 02 '15 at 15:49

If you want to identify both relative and absolute urls, and you want to be sure they match exactly, you will have to get the absolute url of each link and match that. As explained in this answer, the absolute url is found in the href property, independent of the type of url in the attribute.

There is no special selector for properties (that I know of), so you could do something like this:

var aurl = window.location.href; // Get the absolute url
$('.menu li a').filter(function() { 
    return $(this).prop('href') === aurl;
}).parent('li').addClass('active');

that's so impressive. It works perfectly with all cases. – Orthemes Mar 02 '15 at 15:58 — Orthemes, Mar 02 '15 at 15:58

score 0 · Answer 2 · answered Mar 02 '15 at 02:10

0

Use

window.location.href

instead of Pathname

answered Mar 02 '15 at 02:10

Manivannan Chidambaram

26
4

score 0 · Answer 3 · answered Mar 02 '15 at 15:40

If you want to identify both relative and absolute urls, I don't think there will be a single window.location component that will match both. Have a look at the jQuery selectors page. Depending on your site structure, perhaps you could use the "Attribute ends with" selector [name$="value"]:

var aurl = window.location.pathname;
$('.menu li a[href$="'+aurl+'"]').parent('li').addClass('active');

score 0 · Answer 4 · answered Mar 02 '15 at 16:01

I think you are trying to add active class to li tag if the browser url is equal to that li>a child href if this is what you want then here a simple solution :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>

<ul id="menu">
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
  <li><a href="test.html">test</a></li>
</ul>

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu a").click(function(){
            var browserUrl = window.location.href;
            var myUrl = $(this).attr('href');
            alert(browserUrl);
            alert(myUrl);
            if(browserUrl === myUrl ){
                $(this).parent().addClass('active');
            }

        return false; // to prevent the default behavior of the a tag when clicked
        });
    });
</script>
</body>
</html>

How to use window.location to highlight the active menu item?

4 Answers4