Bootstrap 如何在自定义列表组中的点击事件中添加一个活动类

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

Bootstrap介绍

Bootstrap是一个流行的开源前端开发框架。
它通过提供一套预先设计好的CSS和JavaScript组件来帮助创建响应式和移动优先的网页。
Bootstrap提供了一个网格系统来创建响应式和灵活的布局，以及广泛的UI组件，如表单、按钮、导航和模型。
Bootstrap还拥有大量预先设计好的主题和模板，可用于快速创建专业的网站。
Bootstrap被广泛使用，并得到一个大型社区的支持，因此很容易在网上找到资源、教程和例子。

方法1（jQuery）

在Bootstrap中，你可以通过使用JavaScript或jQuery为列表组项目的点击添加一个活动类。下面是一个使用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 函数被用来从所有列表组项目中移除活动类， addClass 函数被用来将活动类添加到被点击的元素中。

方法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函数被调用，事件对象被作为参数传递。该函数首先从先前选择的元素中移除活动类，然后将活动类添加到当前元素中。

上面的两个例子都将为被点击的列表组项目添加 “活动 “类，这将根据Bootstrap的样式改变其外观。请注意，在这两个例子中，你需要确保在你的页面上加载了jQuery或Bootstrap，以使代码能够工作。