如何为li元素内的a标签添加active类并修改当前元素外观

问题原因 #

1. 类名绑定节点不统一：HTML初始状态下active类加在<li>标签上，但你的JS逻辑是操作<a>标签的active类，首次点击时根本找不到带active类的<a>标签，移除逻辑失效。
2. 链接默认跳转覆盖操作：<a>标签href为空，点击后会触发页面刷新，刚加上的类会因为页面重置消失，看起来和没生效一样。
3. CSS属性非法：background-position: left right是无效值，会导致左侧渐变背景条无法正常显示。

修复方案 #

方案一：统一给<a>标签加active类 #

修改JS代码，确保DOM加载完成后再绑定事件，同时阻止默认跳转：

$(function() {
  // 初始化：把li上的初始active类迁移到a标签
  $('.side-track li.active a').addClass('active');
  $('.side-track li').removeClass('active');

  $('.side-track li').click(function(e) {
    // 阻止a标签默认跳转刷新行为
    e.preventDefault();
    $('.side-track li a.active').removeClass('active');
    $(this).find('a').addClass('active');
  });
});

修改CSS中无效的背景定位属性：

.active {
  padding-left: 3px;
  background: linear-gradient(0deg, rgba(181, 195, 186, 1) 53%, rgba(12, 138, 104, 1) 53%) no-repeat;
  background-size: 3px 100%;
  /* 修正为合法定位值 */
  background-position: left center;
  color: var(--grassGreen);
  font-weight: 700;
}

方案二：统一给<li>标签加active类（更简单） #

直接修改JS逻辑操作<li>的类，无需改动HTML初始结构：

$(function() {
  $('.side-track li').click(function(e) {
    e.preventDefault();
    $('.side-track li.active').removeClass('active');
    $(this).addClass('active');
  });
});

对应修改CSS选择器，让样式生效：

.side-track li.active a {
  padding-left: 3px;
  background: linear-gradient(0deg, rgba(181, 195, 186, 1) 53%, rgba(12, 138, 104, 1) 53%) no-repeat;
  background-size: 3px 100%;
  background-position: left center;
  color: var(--grassGreen);
  font-weight: 700;
}

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