如何使用jQuery为选中的ul下li标签添加指定CSS样式

问题修复方案 #

原有代码问题说明 #

你现有的jQuery代码存在3个核心问题：

• 不需要通过each循环绑定点击事件，直接给目标元素绑定即可，循环会导致同一元素被重复绑定多次点击事件，触发异常
• 点击事件触发时你给所有符合规则的a标签都添加了选中样式，没有做选中状态的排他处理，也没有定位到当前被点击的元素
• 选择器li .cat-item a写法错误，cat-item是li元素本身的类名，不需要加空格，正确写法为li.cat-item a

修复后的代码 #

jQuery代码（点击后给a标签加选中样式）

jQuery(function() {
  // 绑定所有分类项链接的点击事件
  jQuery('.cat-item a').click(function(e) {
    // 阻止a标签默认跳转行为，如果需要跳转可以删掉这行
    e.preventDefault();
    // 先移除所有分类项的选中状态
    jQuery('.cat-item a').removeClass('selected');
    // 给当前点击的链接加选中样式
    jQuery(this).addClass('selected');
  });
});

如果要给li标签本身加选中样式，只需要调整对应代码即可：

jQuery(function() {
  jQuery('.cat-item a').click(function(e) {
    e.preventDefault();
    jQuery('.cat-item').removeClass('selected');
    // 找到当前点击a的父级li元素加样式
    jQuery(this).closest('.cat-item').addClass('selected');
  });
});

可选CSS优化

如果要让选中样式显示更合理，可以调整CSS适配：

.cat-item {
  padding: 4px 6px;
  border-radius: 4px;
}
.selected {
  background-color: grey;
  color: #fff;
  /* 如果是给a加样式可以加个内边距 */
  /* padding: 2px 4px; */
}

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