Javascript 单击li标记时无法将css添加到li元素

这是HTML部分-

 <div id="sidebar" role="navigation">

                    <ul class="nav nav-sidebar">
                        <li class="active"><a href="#">My Orders</a></li>
                        <li><a href="#">My Store</a></li>
                        <li><a href="#">My Profile</a></li>
                        <li><a href="#">My Account</a></li>
                        <li><a href="#">Settings</a></li>

                    </ul>

                </div>

JS代码：

 $(document).ready(function() {

    $('#sidebar').on('click', 'li' function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

查看演示 每当我点击一个li标签时，所有其他标签都应该删除“活动”标签，点击的“li”标签应该变成“红色”或激活。当前，当您单击标记时，它将高亮显示，而不是红色。

---

如何实现所需的功能？

您应该使用它，而忘记在JSFIDLE上添加JQuery：

 $(document).ready(function() {
    $('#sidebar .nav li').on('click', function(){
        $(this).closest('ul').find('.active').removeClass();
        $(this).addClass('active');

    });
});

编辑： 我还将css更改为：

.nav.nav-sidebar>li.active>a

---

正如@Vohuman所建议的，你的小提琴有三个问题：

选择器和处理程序之间存在语法错误，缺少

，

$('#sidebar').on('click', 'li' function() {
                        // ---^

您尚未加载jQuery。您可以从左侧面板加载它

添加类时，引导

：focus

选择器将覆盖选择器：

.nav>li>a:hover, .nav>li>a:focus {
    text-decoration: none;
    background-color: #eee;
}

您应该使用更具体的选择器。类似于

.nav>li.active>a

当出现

1）我认为您可以简化选择器

    $('#sidebar li').on('click', function(){
        $(this).siblings().removeClass("active"); //better than 'find'
        $(this).addClass('active');            
    });

2） @Vohuman提到的焦点是您的“真正”问题，已修复：

    .nav-sidebar > .active, .nav-sidebar > .active :focus  {
        color: #fff;
        background-color: #c52d2f;
    }

---

您在这行中忘记了逗号

$('#sidebar').on('click', 'li' function(){

应该是

$('#sidebar').on('click', 'li', function(){

您忘记在此行中指定要删除的类

$(this).closest('ul').find('.active').removeClass();

更正如下：

$(this).closest('ul').find('.active').removeClass("active");

然后，由于boostrap，您必须添加一点css。

$(this).closest('ul').find('.active').removeClass("active");

.nav-sidebar > .active > a,
.nav-sidebar > .active > a:focus{
    color: #fff;
    background-color: #c52d2f;
}