jQuery 当点击链接时更改活动的li

在本文中，我们将介绍如何使用jQuery在点击链接时更改活动的li。通过这种方法，我们可以改变导航菜单中的活动列表项，以突出显示当前选择的页面或功能。

准备工作

在开始之前，确保你已经引入了jQuery库。你可以通过以下方式在HTML中引入它：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

除此之外，还需要有一个导航菜单的HTML结构，并在CSS中定义相应的样式。以下是一个示例的HTML结构和CSS样式：

<ul class="navigation">
  <li><a href="#home">首页</a></li>
  <li><a href="#about">关于我们</a></li>
  <li><a href="#services">服务</a></li>
  <li><a href="#contact">联系我们</a></li>
</ul>

<style>
.navigation li.active {
  background-color: #333;
  color: #fff;
}
</style>

在这个示例中，我们有一个包含四个导航链接的无序列表。初始状态下，没有任何链接被标记为活动状态。

响应点击事件

为了在点击链接时更改活动的li，我们需要使用jQuery来响应点击事件。我们可以使用click()函数来为链接添加点击事件监听器，并在函数中执行相应的逻辑。

以下是一个实现示例：

$(document).ready(function() {
  $('.navigation li a').click(function() {
    // 删除所有li的活动类
    $('.navigation li').removeClass('active');
    // 将当前点击的链接所在li添加活动类
    $(this).parent('li').addClass('active');
  });
});

在这个示例中，我们使用了$(document).ready()来确保页面中的所有元素都已加载完成后再执行jQuery代码。然后，我们使用$('.navigation li a')选择所有导航链接，并为它们添加了点击事件监听器。在点击事件函数中，我们首先使用$('.navigation li')选择所有导航列表项，并使用removeClass('active')方法来删除它们的活动类。接下来，我们使用$(this).parent('li')选择当前点击链接的父元素li，并使用addClass('active')方法为它添加活动类。

你可以根据实际情况进行相应的修改和调整。例如，如果你的导航菜单在页面加载时初始状态已经有一个活动的列表项，你可以在HTML中为该列表项添加active类。

示例展示

下面我们通过一个示例来展示如何在点击链接时更改菜单中的活动列表项：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Navigation</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .navigation li.active {
      background-color: #333;
      color: #fff;
    }
  </style>
</head>
<body>
  <ul class="navigation">
    <li class="active"><a href="#home">首页</a></li>
    <li><a href="#about">关于我们</a></li>
    <li><a href="#services">服务</a></li>
    <li><a href="#contact">联系我们</a></li>
  </ul>

  <script>
    (document).ready(function() {('.navigation li a').click(function() {
        ('.navigation li').removeClass('active');(this).parent('li').addClass('active');
      });
    });
  </script>
</body>
</html>