页面重新加载后，菜单活动状态保持在单击的链接上

Question

I'm having trouble with my menu. i want the active state to remain on the last clicked link.

<ul id="nav">
    <li class="active"><a href="?field1="2"&field2="test">products </a></li>
    <li><a href="?field1="3"&field2="test2">products2 </a></li>
</ul>

when i click on products2 the table on the right side will populate data base on the field in url this will refresh the page. how can i remain the clicked link have the active class?

Answer 1

The following should be working:

var qs = decodeURIComponent(location.search);
$('a[href="' + qs + '"]').parents('li').addClass('active');

In location.search you will find the query-string which is appenden to your URL.

decodeURIComponent will decode your URL so it avoids eg the %20 for a whitespace.

$('a[href="' + qs + '"]') selects the a -tag which has a href -attribute corresponding to your query-string.

But I would recommend to remove the extra " from your url-parameters inside your href :

<ul id="nav">
    <li class="active"><a href="?field1=2&field2=test">products </a></li>
    <li><a href="?field1=3&field2=test2">products2 </a></li>
</ul>

If you can't remove the quotation marks you have to escape them for the attribute-selector to work.

---

Reference

location.search

decodeURIComponent

jQuery attribute selector

.parents()

.addClass()

Answer 2

You can examine the url, and with that apply the class to the relevant element. This can be done server side, or client side (i see that you tag this with client technology)

Like this

//if url contains "field1=3" then add the class "selected" to element "tab2"
if (window.location.href.indexOf("field1=3") > -1) {
   $("#tab2").addClass("selected")
}

The values and tabs should obviously be structured in some whay, but you get the gist.

Answer 3

Using jQuery, you can try this for your scenario.

   var currentPath="?"+window.location.href.split("?")[1];
   $("a[href='"+currentPath+"']").parent().addClass("active");

Answer 4

Simple but ugly solution is that On the product2 page add the code to manually highlight the link.

Or if the problem is for all the links and there are n number of links will be available in future then your code should be more structured. In this case you can put the common code for handling this kind of common work (highlighting the links on side bar) in one of the common js file. Instead of putting on all the pages.