如何添加<li>类激活并在使用 jQuery 悬停后离开它？

在进行网页开发过程中，我们经常需要对 <li> 元素进行添加类并激活，以及在使用 jQuery 悬停后离开它。那么，这个如何实现呢？

以下是使用 jQuery 实现添加类并激活的方法：

$('li').on('click', function() {
  $('li.active').removeClass('active');
  $(this).addClass('active');
});

这里使用了 jQuery 的 on() 方法来监听 <li> 元素的点击事件，首先会移除已经激活的元素的 active 类，再给当前元素添加 active 类。

接下来是使用 jQuery 悬停后离开时去除 active 类的方法：

$('li').on('mouseenter', function() {
  $(this).addClass('active');
}).on('mouseleave', function() {
  $(this).removeClass('active');
});

这里使用了 mouseenter 和 mouseleave 事件来分别在鼠标移入和移出时添加和去除 active 类。同时，这里通过链式调用给 <li> 元素绑定了两个事件。

最后，如下是一个完整的示例代码片段：

<ul>
  <li class="active">Home</li>
  <li>About</li>
  <li>Contacts</li>
</ul>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $('li').on('click', function() {
    $('li.active').removeClass('active');
    $(this).addClass('active');
  }).on('mouseenter', function() {
    $(this).addClass('active');
  }).on('mouseleave', function() {
    $(this).removeClass('active');
  });
</script>

以上就是如何添加 <li> 类激活并在使用 jQuery 悬停后离开它的方法。