jQuery: Add active class / state and hold it!
<p>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.  </p>

<pre><code>$("#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");
});
</code></pre>

<p>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.</p>

<p>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 another element of the sidebar nav ul?</p>

<p>The HTML:</p>

<pre><code>&lt;div id="sidebar-nav"&gt;
   &lt;ul&gt;                         
     &lt;li&gt;&lt;a href="link1"&gt;Link One&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="link2"&gt;Link Two&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="link3"&gt;Link Three&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="link4"&gt;Link Four&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
&lt;/div&gt;
</code></pre>
