En Bootstrap 4, los eventos de Javascript o jQuery se usan para agregar una clase activa al hacer clic en un evento en el grupo de listas personalizadas.
Sintaxis:
$(document).ready(function() {
$('selector').click(function() {
$('selector.active').removeClass("active");
$(this).addClass("active");
});
});
Los siguientes ejemplos ilustran cómo agregar una clase activa en un evento de clic en un grupo de lista personalizado usando jQuery de diferentes maneras.
Ejemplo 1: El siguiente ejemplo ilustra cómo agregar una clase activa en un evento de clic en un grupo de lista personalizado usando jQuery a través del bucle for.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Producción:
Ejemplo 2: El siguiente ejemplo ilustra cómo agregar una clase activa en un evento de clic en un grupo de lista personalizado usando jQuery junto con addClass y removeClass de manipulación de atributos de clase jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="
https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</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>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por VigneshKannan3 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA