Question

I have a path like this:

http://www.domain.com/admin/item.php?id=4&action=edit

And want to get that path, compare with every element of my menu, and add the class “active” to the current menu item, like this:

<ul class="nav nav-list">
<li><a href="http://www.domain.com/admin/item.php?id=1&action=edit">Item 1</a></li>
<li><a href="http://www.domain.com/admin/item.php?id=2&action=edit">Item 2</a></li>
<li><a href="http://www.domain.com/admin/item.php?id=3&action=edit">Item 3</a></li>
<li class="active"><a href="http://www.domain.com/admin/item.php?id=4&action=edit">Item 4</a></li>
<li><a href="http://www.domain.com/admin/item.php?id=5&action=edit">Item 5</a></li>
...
</ul>

How can I do it with Jquery? The most functions I tried, neither of them can get the full pathname (with all vars)

Answer 1

Use the attribute selector to select the anchor element with the href property set to the given path. Then use addClass to add active as the class for the selected anchor element. If you want the full current path of the page you are on, use location.href, but note that this will include the current hash too, if there is one. Also, I would suggest selecting the menu by ID, so add an ID to your nav menu.

function setCurrentMenuPathAsActive(path){
   $(".nav li a[href='" + path + "']").addClass("active");
}

setCurrentMenuPathAsActive(location.href);