jQuery Navigation Active class reverts on page reload
<p>I have the following script that loads on every page in my application:</p>

<pre><code>           $(document).ready(function() { 
          $('ul li').click(function(){
            $("li").removeClass("current_page_item");
            $(this).addClass("current_page_item");
          });
        });
</code></pre>

<p>My navigation html looks like:</p>

<pre><code>                &lt;ul id="dropmenu"&gt;
                    &lt;li class="active"&gt;
                        &lt;%=  link_to 'Home Page',  welcome_index_path %&gt;                    
                    &lt;/li&gt;
                    &lt;li&gt;
                        &lt;%=  link_to 'Business Owners',  business_owners_path %&gt;

                    &lt;/li&gt;
                &lt;/ul&gt;
</code></pre>

<p>Each time I click on the "Business Owners" link, the image to identify the active page first moves from the Home Page link to the Business Owners link and then quickly reverts to the Home Page link again upon page reload. Is there a way in jQuery to persist the state of the "active" link after a page load?</p>
