Hello Guys
The below example will guide you to add or remove class by using jquery.
So if you are stuck in such case follow the below code.
Here is the HTML Code
<nav>
<ul>
<li><a href="javascript:void(0)" class="active">home</a></li>
<li><a href="javascript:void(0)">about us</a></li>
<li><a href="javascript:void(0)">contact us</a></li>
<li><a href="javascript:void(0)">report abuse</a></li>
</ul>
</nav>
Here is the Css Code
nav ul{text-align: center;}
nav li{list-style: none;display: inline-block;}
nav li a{padding: 10px;display: inline-block;text-decoration: none;color:#fff;background: #90c140;text-transform: uppercase;}
.active{background: #000;}
Here is the JQuery
$(document).ready(function(){
$('nav li a').click(function() {
$('nav li a').removeClass('active');
$(this).addClass('active');
});
});
I hope this article will helpful for you.
0 Comment(s)