Bootstrap Snippet Add Remove Class on Click using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="navs">
<ul>
<li><a class="active" href="#">ABOUT</a></li>
<li><a href="#">EVENTS</a></li>
<li><a href="#">REVIEWS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
.active {
    text-decoration: underline;
}
ul {
    list-style-type: none;
}
a.active {
   color:red;
}
a.active {
   color:black;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
$('#navs li a').on('click', function(){
    $('li a.active').removeClass('active');
    $(this).addClass('active');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

"Add Remove Class on Click"
Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Add Remove Class on Click" Bootstrap 4.1.1 Snippet by sunil8107

Related: See More

Questions / Comments:

"Add Remove Class on Click"
Bootstrap 4.1.1 Snippet by sunil8107