javascript - 单击 li 标签时无法将 css 添加到 li 元素

Question

这是 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>

CSS:

/* Sidebar navigation */
    .nav-sidebar {
        background-color: #f5f5f5;
        margin-right: -15px;
        margin-bottom: 20px;
        margin-left: -15px;
    }
    .nav-sidebar > li > a {
        padding-right: 20px;
        padding-left: 20px;
    }
    .nav-sidebar > .active > a {
        color: #fff;
        background-color: #c52d2f;
    }

JS代码:

 $(document).ready(function() {

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

    });
});

检查演示 http://jsfiddle.net/tu4tsa4n/1/ 每当我点击 li 标签时，所有其他标签都应删除“事件”标签，并且点击的“li”标签应变为“红色”或已激活。当前，当您单击标签时，它会突出显示而不是红色。 如何实现所需的功能？

Answer 1

你的 fiddle 有3个问题:

1. 语法错误，选择器和处理程序之间缺少 ,。

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

2. 您还没有加载 jQuery。您可以从左侧面板加载它。

3. 添加类后， Bootstrap :focus 选择器会覆盖您的选择器:

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

   您应该使用更具体的选择器。类似于 .nav > li.active > a.

http://jsfiddle.net/u2tzrpf2/