📌  相关文章
📜  如何在Bootstrap 4的自定义列表组中的click事件上添加活动类？(1)

📅  最后修改于: 2023-12-03 15:08:51.706000             🧑  作者: Mango

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

有时，我们需要在Bootstrap 4自定义列表组中的click事件上添加活动类来标记那个选项被选中了。这篇文章将会向你展示如何实现这一点。

步骤
1. 添加样式

我们需要先在CSS文件中添加一个样式选中项。在这个示例中，我们已经定义了一个.active样式。

.active {
  background-color: #007bff;
  color: #fff;
}
2. 添加JS

我们将使用jQuery在点击列表项时添加/删除活动类。请在HTML文件的<head>标签中添加以下jQuery脚本：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
  $(".list-group-item").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
  });
});
</script>

请注意：请在项目中添加jQuery库

这个脚本将在文档加载完成后运行，然后为所有具有.list-group-item类的列表项添加一个点击事件。在点击事件中，我们将添加一个active类到被点击项并从其兄弟项中删除该类。

3. HTML结构

构建一个自定义Bootstrap列表组，如下所示：

<div class="list-group">
  <a href="#" class="list-group-item active">选项1</a>
  <a href="#" class="list-group-item">选项2</a>
  <a href="#" class="list-group-item">选项3</a>
  <a href="#" class="list-group-item">选项4</a>
  <a href="#" class="list-group-item">选项5</a>
</div>

在HTML中，我们已经创建了一个具有.list-group-item类的列表项，其中第一个项被标记为active，以便标记默认选中的选项。请注意，必须将jQuery脚本添加至<head>标签中。

结论

如此简单，我们已经成功地向自定义Bootstrap列表组中的click事件添加活动类，以标记被选中的选项。请在你的项目中尝试这个示例代码，让你的用户更容易地理解你的UI界面。