In Bootstrap 4, Javascript or jQuery events are used to add active class on click event in custom list group.
Syntax:
$(document).ready(function() { $('selector').click(function() { $('selector.active').removeClass("active"); $(this).addClass("active"); }); });
Following examples illustrates how to add active class on click event in custom list group using jQuery in different ways.
Example 1: Below example illustrates how to add active class on click event in custom list group using jQuery through for loop.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link rel = "stylesheet" href =
< script src="
</ script >
< script src="
</ script >
< script src="
</ script >
</ head >
< body >
< center >
< div class = "container" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< h3 >Active Item in a List Group</ h3 >
</ div >
</ center >
< div class = "list-group" >
< a href = "#!" class="list-group-item
list-group-item-action
flex-column
align-items-start active">
< div class = "d-flex w-100 justify-content-between" >
< h5 class = "mb-2 h5" >DSA Courses Available soon</ h5 >
< small >1 days ago</ small >
</ div >
< p class = "mb-2" >
This course is will take you from basics
to advance as well as it will certify you
on the basis of your performance.
</ p >
< small >Students, Working Professionals</ small >
</ a >
< a href = "#!" class="list-group-item
list-group-item-action
flex-column
align-items-start">
< div class = "d-flex w-100 justify-content-between" >
< h5 class = "mb-2 h5" >Placement 100</ h5 >
< small >2 days ago</ small >
</ div >
< p class = "mb-2" >
This course will guide you for placements
with theory, lecture videos, weekly
assessments, contests and doubt assistance.
</ p >
< small >Pre-final, Final year students</ small >
</ a >
< a href = "#!" class="list-group-item
list-group-item-action
flex-column align-items-start">
< div class = "d-flex w-100 justify-content-between" >
< h5 class = "mb-2 h5" >
Machine Learning Foundation With Python
</ h5 >
< small >4 days ago</ small >
</ div >
< p class = "mb-2" >
Learn about the concepts of Machine Learning,
effective machine learning techniques from
basics with Python.
</ p >
< small >
Students, Working Professionals
seeking a career in ML
</ small >
</ a >
</ div >
< script >
$(".list-group-item").click(function() {
// Select all list items
var listItems = $(".list-group-item");
// Remove 'active' tag for all list items
for (let i = 0; i < listItems.length ; i++) {
listItems[i].classList.remove("active");
}
// Add 'active' tag for currently selected item
this.classList.add("active");
});
</script>
</ body >
</ html >
|
Output:
Example 2: Below example illustrates how to add active class on click event in custom list group using jQuery along with addClass and removeClass of jQuery class attribute manipulation.
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1" >
< link rel = "stylesheet"
< script src="
</ script >
< script src="
</ script >
< script src="
</ script >
</ head >
< body >
< div class = "container" >
< h1 class = "text-success text-center" >GeeksforGeeks</ h1 >
< h3 >Active Item in a List Group</ h3 >
< ul class = "list-group" >
< li class = "list-group-item active" >Active item</ li >
< li class = "list-group-item" >Click me to active item</ li >
< li class = "list-group-item" >Click me too active item item</ li >
</ ul >
</ div >
< script >
$(document).ready(function() {
$('li').click(function() {
$('li.list-group-item.active').removeClass("active");
$(this).addClass("active");
});
});
</ script >
</ body >
</ html >
|
Output:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.