jQuery: Add active class / state and hold it!

I have no idea if this is possible but right now I have a left side navigation bar with a bunch of links in them. I'm adding an active class (on state), to whatever link item users are clicking by checking the url it's pointing to and the current page url. This works well.

$("#sidebar-nav ul li a").each(function() {
if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
$(this).addClass("active");
});

However, I need to continue "holding" the active state / class on that element while people are clicking within the other pages of that initial page they landed in. Because each sidebar link represents a "category" so I want to keep that sidebar link active not just on the first page where urls match, but throughout.

Right now once users click away within the first page they landed, the active state is lost since the urls don't match anymore. I only want the active state to be removed if they click on another sidbar nav. Hope this makes sense, but is there a way to "hold" that initially set active state throughout ... unless people click on开发者_如何学Go another element of the sidebar nav ul?

The HTML:

<div id="sidebar-nav">
   <ul>                         
     <li><a href="link1">Link One</a></li>
     <li><a href="link2">Link Two</a></li>
     <li><a href="link3">Link Three</a></li>
     <li><a href="link4">Link Four</a></li>
   </ul>
</div>

---

Simplest (unless it inhibits the page functionality) way i can think of is pass an anchor on with the link and then check the document.location.hash on page load and "select" the category accordingly.

Alternatively, since you're already comparing the href, just compare the path locations and if they start with the current path (assuming the following:)

<ul>
  <li><a href="/cateogry">Cateogory 1</a><ul>
    <li><a href="/category1/sub1">Sub 1</a></li>
    <li><a href="/category1/sub2">Sub 2</a></li>
    <li><a href="/category1/sub3">Sub 3</a></li>
  </l></li>
  ...
</ul>

If the above link is in (and is the start of) the target URL, it's save to highlight it

(In other words your links are nested like your navigation is). If not, you may be able to get by both and not use link or hash and pass a pseudo-get variable and then use javascript to parse it out (once again, on page load).

---

You will want to change your url match logic to a regular expression based one where you check to see if the first part of your url matches the expected sequence for this "category". This is of course assuming that each page within a category is organized so that the url indicates what "category" it is in:

ex.   http://www.mysite.com/cars/priceguide.html
      http://www.mysite.com/cars/listings.html
      http://www.mysite.com/buses/priceguide.html

In the example above the first two links are in the "cars" category and the last is in the "buses" category.

---

Using regular expressions, you could evaluate the URL for the relevant fragment. This depends on your URL scheme though; if for example your site uses URLs as follows:

www.mysite.com/products
www.mysite.com/products/widget
www.mysite.com/products/wodget

You could extract the first directory level (www.mysite.com/products)and use that as your active link reference.