Adding/Removing classes jquery based on current url

Question

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.

so I have 5 spans, the first 1 has the active class on pageload

<span class="one active"></span>
<span class="two"></span>
<span class="three"></span>
<span class="four"></span>
<span class="five"></span>

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:

$(function(){

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

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

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

So the problems I'm facing are:

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.
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)

Any suggestions?

Thanks.

Rizstien · Accepted Answer · 2012-12-03 14:38:49Z

1

jQuery(window).hashchange( function(){
    jQuery(location.hash).click();
});

jQuery(window).load( function(){
    jQuery(location.hash).click();
});

these two functions will solve your problem

answered Dec 3, 2012 at 14:38

Rizstien

8021 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding/Removing classes jquery based on current url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related