Adding/Removing classes jquery based on current url
<p>I'm trying to write a clean script to add and remove classes based on the url because I'm using some form of jquery slider plugin.</p>

<p>so I have 5 spans, the first 1 has the active class on pageload</p>

<pre><code>&lt;span class="one active"&gt;&lt;/span&gt;
&lt;span class="two"&gt;&lt;/span&gt;
&lt;span class="three"&gt;&lt;/span&gt;
&lt;span class="four"&gt;&lt;/span&gt;
&lt;span class="five"&gt;&lt;/span&gt;
</code></pre>

<p>When I click the next button the jquery plugin appends a '#/1' to the end of the url and for every slide the number will go up by one, so this is what I've done so far for each slide:</p>

<pre><code>$(function(){

$('#continue').click(function(){
  var location = window.location.href;

    if (location.indexOf('#/1') &gt; -1 ) {
      $('.one').removeClass('active');
      $('.two').addClass('active');
    }

    if (location.indexOf('#/2') &gt; -1 ) {
      $('.two').removeClass('active');
      $('.three').addClass('active');
    }
  }); 
});
</code></pre>

<p>So the problems I'm facing are:</p>

<ol>
<li><p>This is only on click function on the next button, if the user clicks the previous button, the active class needs to change to the appropriate number too, but I'll probably need a way of checking exactly which step they are clicking the previous button from and would need to duplicate that code 5 times because there are 5 steps.</p></li>
<li><p>If the user refreshes the page span .one will be active again and the step that the user was on will show on the page (it doesn't go back to the first step on refresh)</p></li>
</ol>

<p>Any suggestions?</p>

<p>Thanks.</p>
