Picnic Website Code Tutorials

jQuery Add and Remove Class Tutorial

3/20/2013

View Demo

jQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$("a").click(function() {
    $("a").parent().removeClass("selected");    
    $(this).parent().addClass("selected");
});
</script>
		

CSS

li.selected a {
color:red;
font-weight:900;
}
		

HTML

<ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">PROFILE></a></li>
    <li><a href="#">CONTACT</a></li>
    <li><a href="#">ABOAT</a></li>
</ul>
		

Need help adding this or other code to your website? Post it here in the forum! Forum

Sponsors

Top Donators

Friends of Mine