How to change a class to active once clicked

Question

I so far have this code:

<section class="top-bar-section">
<ul class="adjust">
<li class="active"><a href="#">HOME</a></li>
<li class=""><a href="#contact">CONTACT</a></li>
<li class=""><a href="#">BLOG</a></li>
<li class=""><a href="#">SHOP</a></li>
</ul>      
</section>

And basically I would like the class to change to active when I click on the "contact" link. This moves the page down to the footer. Do you guys know how I could do this? I tried that Jquery thing on here but for some reason I cannot seem to get it to work.

I am using Foundation 5.0.3 if that helps :)

score 1 · Accepted Answer · answered Jan 19 '14 at 22:47

1

You could use something basic like this:

$('.adjust > li').click(function(){
    $(this).addClass('active').siblings('li').removeClass('active');
});

EXAMPLE HERE

answered Jan 19 '14 at 22:47

Josh Crozier

233,099
56
391
304

One thing, how do I get it to change back when I scroll back up the page? – seangeraghty Jan 19 '14 at 22:54
@seangeraghty I'd suggest looking into jQuery waypoints.. http://imakewebthings.com/jquery-waypoints/ – Josh Crozier Jan 19 '14 at 22:55

How to change a class to active once clicked

1 Answers1

Linked