CODEWITHSUNDEEP
jqueryhtmlpathname
Orthemes
Orthemes

Reputation: 93

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

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>

Upvotes: 3

Views: 3168

Answers (4)

ismnoiet
ismnoiet

Reputation: 4159

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>

Upvotes: 0

Spiny Norman
Spiny Norman

Reputation: 8347

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');

Upvotes: 2

Spiny Norman
Spiny Norman

Reputation: 8347

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');

Upvotes: 0

Manivannan Chidambaram
Manivannan Chidambaram

Reputation: 26

Use 

window.location.href

instead of Pathname

Upvotes: 0

Related Questions