如何在 Bootstrap 4 的自定义列表组中添加单击事件的活动类？

在 Bootstrap 4 中，您可以使用自定义列表组来显示列表内容。自定义列表组是一种非常有用的组件，因为它提供了一个简单的方法来呈现列表或网格布局。

但是，有时您可能需要在自定义列表组中添加一些交互性，比如单击事件，以提高用户体验。在本文中，我们将介绍如何在 Bootstrap 4 的自定义列表组中添加单击事件的活动类。

步骤1：创建自定义列表组

首先，我们需要创建一个自定义列表组。您可以使用以下代码创建一个简单的自定义列表组：

<ul class="list-group">
  <li class="list-group-item">Item 1</li>
  <li class="list-group-item">Item 2</li>
  <li class="list-group-item">Item 3</li>
</ul>

步骤2：添加事件处理程序

接下来，我们需要为每个列表项目添加一个事件处理程序。您可以使用以下代码为每个列表项添加一个单击事件处理程序：

$(document).ready(function(){
  $('.list-group-item').click(function(){
    $('.list-group-item').removeClass('active');
    $(this).addClass('active');
  });
});

在上面的代码中，我们使用 jQuery 添加了一个单击事件处理程序。当用户单击列表项时，我们会从所有列表项中删除“active”类，并为单击的列表项添加此类。

步骤3：样式化活动类

最后，我们需要为“active”类样式化样式。您可以在 CSS 中使用以下代码为“active”类设置样式：

.list-group-item.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

在上面的代码中，我们定义了“active”类的样式。当用户单击列表项并添加“active”类时，我们会将此类的背景色、边框颜色和文本颜色更改为蓝色、设置为较深的蓝色和白色。

结论：

现在，在 Bootstrap 4 的自定义列表组中，每次单击列表项时，都会添加一个活动类，这可以提高用户体验和交互性。通过按照上述步骤，您可以在自己的 Web 应用程序或网站中添加此功能。