如何在 Bootstrap 的自定义列表组中添加点击事件的 active 类？

我们可以使用 JavaScript 或 jQuery 在 Bootstrap 4 中的自定义列表组项目中添加 active 类。这可以通过为每个列表组项目添加 onclick 事件，然后使用 "addClass" 方法将 active 类添加到被点击的项目来实现。通过这样做，我们可以轻松创建一个具有 active 状态的自定义列表组，该状态根据用户交互而改变。

Bootstrap 简介

  • Bootstrap 是一个流行的开源前端开发框架。

  • 它通过提供一组预先设计的 CSS 和 JavaScript 组件来帮助创建响应式和移动优先的网页。

  • Bootstrap 提供了一个网格系统，用于创建响应式和灵活的布局，以及各种 UI 组件，如表单、按钮、导航和模型。

  • Bootstrap 还拥有大量预先设计的主题和模板，可用于快速创建外观专业的网站。

  • Bootstrap 被广泛使用并得到大型社区的支持，因此在线上很容易找到资源、教程和示例。

方法 1（jQuery）

在 Bootstrap 中，您可以使用 JavaScript 或 jQuery 在点击时将 active 类添加到列表组项目中。以下是如何使用 jQuery 执行此操作的示例：

<div class="list-group">
   <a href="#" class="list-group-item">Item 1</a>
   <a href="#" class="list-group-item">Item 2</a>
   <a href="#" class="list-group-item">Item 3</a>
</div>
<script>
   $('.list-group-item').click(function() {
      $('.list-group-item').removeClass('active');
      $(this).addClass('active');
   });
</script>

解释

在此示例中，jQuery click 函数用于将事件侦听器附加到所有具有类 list-group-item 的元素。当其中一个元素被点击时，removeClass 函数用于从所有列表组项目中删除 active 类，addClass 函数用于将 active 类添加到被点击的元素。

方法 2（原生 JS）

您也可以使用纯 JavaScript 来实现相同的功能：

<div class="list-group">
   <a href="#" class="list-group-item" onclick="makeActive(event)">Item 1</a>
   <a href="#" class="list-group-item" onclick="makeActive(event)">Item 2</a>
   <a href="#" class="list-group-item" onclick="makeActive(event)">Item 3</a>
</div>
<script>
   function makeActive(event) {
      var previous = document.getElementsByClassName("active");
      if (previous.length > 0) {
         previous[0].className = previous[0].className.replace(" active", "");
      }
      event.target.className += " active";
   }
</script>

在此示例中，onclick 属性用于将事件侦听器附加到所有具有类 list-group-item 的元素。当其中一个元素被点击时，会调用 makeActive 函数，并将事件对象作为参数传递。该函数首先从先前选定的元素中删除 active 类，然后将 active 类添加到当前元素。

以上两个示例都将 "active" 类添加到被点击的列表组项目中，这将根据 Bootstrap 样式更改其外观。请注意，在以上两个示例中，您需要确保 jQuery 或 Bootstrap 已加载到您的页面上，才能使代码正常工作。

输出

更新于： 2023年2月6日

7K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告