如何用JavaScript实现列表项点击样式切换：点击新项移除旧项样式

1. 定义样式类（优先用CSS控制样式，而非直接操作行内属性） #

在你的样式文件或模板的<style>标签中添加以下类：

.category-sidebar li.active {
  font-weight: bold;
  text-decoration: underline;
}

2. 修改JavaScript代码 #

替换原有JS逻辑，实现点击时重置其他项样式、仅激活当前项的效果：

$('.category-sidebar li').click(function(e) {
  // 移除侧边栏所有列表项的激活类
  $('.category-sidebar li').removeClass('active');
  // 给当前点击的列表项添加激活类
  $(this).addClass('active');
});

3. 方案说明 #

• 用CSS类管理样式，后续调整样式只需修改类定义，比直接操作css()更易维护
• 用.category-sidebar li精准选择目标元素，避免影响页面其他无关列表项
• 点击时先清空所有项的激活状态，再单独激活当前项，实现单选式的高亮效果

如果Hubspot模板无法单独引入CSS文件，可将样式代码放在模板头部的<style>标签中：

<style>
.category-sidebar li.active {
  font-weight: bold;
  text-decoration: underline;
}
</style>

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