如何为点击的导航项添加selected类并移除其他同类项的该类

你的问题出在两个核心错误上：

1. 事件绑定对象错误：你把点击事件绑在了整个.nav-list列表容器上，而非单个导航项的<a>标签，无法精准定位用户点击的具体元素。
2. 选择器范围过广：$('.sidebar ul li a')会选中侧边栏下所有<a>标签，导致所有导航项都被加上selected类。

修正后的jQuery代码 #

// 把点击事件绑定到每个导航项的<a>标签上
$('.nav-list li a').click(function(e) {
    // 阻止<a>标签默认的跳转行为（因href为#，可选但推荐添加）
    e.preventDefault();
    // 移除所有导航项的selected类
    $('.nav-list li a').removeClass('selected');
    // 给当前点击的这个<a>标签添加selected类
    $(this).addClass('selected');
});

代码说明 #

• 事件绑定到.nav-list li a，确保只有点击具体导航项时才触发逻辑。
• $(this)指代当前被点击的<a>标签，实现精准的选中状态切换。
• 若侧边栏包含多个.nav-list，可把选择器改为.sidebar .nav-list li a，避免影响页面其他区域的元素。

兼容动态生成导航项的写法 #

如果导航项是通过AJAX等方式动态加载的，使用事件委托更稳妥：

$('.nav-list').on('click', 'li a', function(e) {
    e.preventDefault();
    $('.nav-list li a').removeClass('selected');
    $(this).addClass('selected');
});

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