如何给SVG的path元素添加active类，实现点击切换选中效果

1. 先定义active样式 #

在CSS中添加激活状态的自定义样式，可根据视觉需求调整填充色、描边等属性：

#bd-map path.active {
  fill: #165DFF;
  stroke: #ffffff;
  stroke-width: 2;
}

2. 优化现有jQuery代码 #

直接替换原有JS代码即可，既实现了激活状态切换，还简化了原有冗余的switch判断逻辑：

$(document).ready(function () {
  $('#mySVG').load("bd-map.html", function () {
    $("#bd-map").click(function (evt) {
      const clickTarget = evt.target;
      // 仅处理path元素的点击事件
      if (clickTarget.tagName.toLowerCase() !== 'path') return;
      // 切换激活状态：清除所有已有active的path的类，给当前点击path加类
      $('#bd-map path.active').removeClass('active');
      $(clickTarget).addClass('active');
      // 直接通过点击目标id拼接加载地址，无需写多分支switch
      $('#info').load(`info.html #${clickTarget.id}`);
    });
  });
})

如果你需要保留原有switch逻辑（比如部分id不需要触发加载），只需要在switch逻辑执行前加上述两行切换active类的代码即可。

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