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

bootstrapweb developmentfront end technology

我们可以使用 JavaScript 或 jQuery 在 Bootstrap 4 中为自定义列表组项添加 active 类。具体方法是:为每个列表组项添加 onclick 事件，然后使用"addClass"方法将 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(Vanilla 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，才能使代码正常工作。