如何为列表项添加类？实现点击切换列表项active类的需求

嘿，我来帮你搞定这个问题！下面咱们一步步实现点击切换列表项active类的功能，同时详细说明给列表项添加类的常用方法。

首先，先修正你现有代码的小问题，再添加点击交互逻辑，最后拆解类操作的核心方法。

一、完整实现代码 #

<ul id="nav" class="nav navbar-nav">
  <li class="active"><a href="a.php">A</a></li>
  <li><a href="b.php">Bs</a></li>
  <li><a href="c.php">C </a></li>
</ul>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
jQuery(function($) {
  // 页面加载时：根据当前URL匹配设置active类
  var path = window.location.href;
  $('#nav li').each(function() {
    // 注意：li本身没有href属性，要取内部a标签的href值
    var itemHref = $(this).find('a').attr('href');
    // 匹配URL的最后一段（比如a.php），避免域名前缀干扰
    if (itemHref === path.split('/').pop()) {
      $(this).addClass('active');
    }
  });

  // 点击列表项时：切换active类状态
  $('#nav li').on('click', function(e) {
    // 如果是单页场景不需要跳转，取消下面这行注释即可
    // e.preventDefault();
    
    // 先移除所有li的active类，确保只有当前项高亮
    $('#nav li').removeClass('active');
    // 给当前点击的li添加active类
    $(this).addClass('active');
  });
});
</script>

关键修正点： #

• 原代码里的this.href是错误的：li元素本身没有href属性，必须获取内部<a>标签的链接值才能正确匹配。
• 用path.split('/').pop()提取URL最后一段，避免域名、路径前缀导致的匹配失败。

二、jQuery给列表项操作类的常用方法 #

下面是几个核心的类操作API，你可以根据场景灵活选择：

• addClass('类名')：给元素添加指定类，重复调用不会重复添加

  // 给导航第一个li添加active类
  $('#nav li:first').addClass('active');
  

• removeClass('类名')：移除元素的指定类

  // 移除所有li的active类
  $('#nav li').removeClass('active');
  

• toggleClass('类名')：切换类状态——元素有这个类就移除，没有就添加

  // 点击li时单独切换自身的active类（适合不需要统一取消其他项的场景）
  $('#nav li').on('click', function() {
    $(this).toggleClass('active');
  });
  

• hasClass('类名')：判断元素是否包含指定类，返回布尔值

  // 检查第一个li是否处于active状态
  if ($('#nav li:first').hasClass('active')) {
    console.log("这个列表项已经是高亮状态啦");
  }
  

这样改造后，既保留了页面加载时自动匹配URL设置高亮的功能，又实现了点击切换的交互，同时你也能清晰掌握列表项类操作的核心方法！

内容的提问来源于stack exchange，提问作者oak