如何使用jQuery按内容选择元素并修改其CSS激活态样式

核心问题说明 #

你原有代码存在两个错误导致无法生效：

• jQuery的css()方法只能设置元素的直接行内样式，无法直接作用于:active这类CSS伪类状态
• :contains选择器是模糊匹配，只要元素文本包含指定内容就会被命中，若存在文本重叠的场景会匹配错误

解决方案 #

推荐用CSS变量结合精确文本匹配的逻辑实现，兼容性好，也适配你无法修改按钮生成规则的场景：

1. 先添加通用CSS规则

#menu a:active, 
#menu a.active:active {
  /* 调用自定义的激活态颜色变量 */
  background-color: var(--btn-active-color);
  /* 可根据需要补充其他激活态样式，比如文字颜色、边框等 */
  color: #fff;
}

2. 替换你原有jQuery代码为如下逻辑

// 确保按钮DOM生成后执行即可，如果是异步生成的按钮就把这段逻辑放在生成完成的回调里
$(function() {
  // 精确匹配文本为1的按钮，设置激活色为绿色
  $("#menu a").filter(function() {
    return $(this).text().trim() === '1';
  }).css('--btn-active-color', 'green');

  // 精确匹配文本为2的按钮，设置激活色为红色
  $("#menu a").filter(function() {
    return $(this).text().trim() === '2';
  }).css('--btn-active-color', 'red');

  // 精确匹配文本为3的按钮，设置激活色为蓝色
  $("#menu a").filter(function() {
    return $(this).text().trim() === '3';
  }).css('--btn-active-color', 'blue');
})

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