Javascript 无法设置活动菜单元素的样式

我有这张反应灵敏的折叠菜单

<nav class="navbar navbar-default">
        <div class="container-fluid col-md-12">
            <div class="col-md-2"></div>
            <div id="logo" class="col-md-3"></div>
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse col-md-6" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#"><span>Home</span></a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#"><span>Things</span> <!-- <span class="caret"></span> --></a>
                        <ul class="dropdown-menu">
                            <li><a href="#"><span>Drop1</span></a></li>
                            <li><a href="#"><span>Drop2</span></a></li>
                        </ul>
                    </li>
                    <li><a href="#"><span>Carriers</span></a></li>
                    <li><a href="#"><span>Contacts</span></a></li>
                </ul>
            </div>
        </div>
    </nav>

我添加此代码是为了添加和删除用于样式设置的“活动”类：

<script>
        var selector = '.nav li';
        $(selector).on('click', function() {
            $(selector).removeClass('active');
            $(this).addClass('active');
        });
        </script>

var选择器='.nav li'；
$（选择器）。在（'单击'，函数（）上）{
$（选择器）.removeClass（'active'）；
$（this.addClass（'active'）；
});

---

问题是，我无法设置活动菜单项的背景色样式。我尝试了我能想到的一切，我能找到的一切，但没有成功。由于某些原因，我无法更改引导默认颜色。其他一切都正常工作，我可以设计其他元素的样式，但出于某种原因，我不能这样做。这里有一个将

选择器更改为
.nav li a
。因为CSS类
active
是为
li
设置的，而您的样式是为
li>a.active
设置的

也可以使用
e.stopPropagation（）以防止事件冒泡到父元素

var selector = '.nav li a';
$(selector).on('click', function() {
  $(selector).removeClass('active');
  $(this).addClass('active');
  e.stopPropagation();
});

将
选择器更改为
.nav li a
。因为CSS类
active
是为
li
设置的，而您的样式是为
li>a.active
设置的

也可以使用
e.stopPropagation（）以防止事件冒泡到父元素

var selector = '.nav li a';
$(selector).on('click', function() {
  $(selector).removeClass('active');
  $(this).addClass('active');
  e.stopPropagation();
});

这是因为您正在从“.nav li”添加和删除活动类，但在css中，您正在设置“li>a.active”的样式。因此，您需要将css更改为'li.active'或将javascript更改为
var selector=.nav li a
，以匹配css样式
 这是因为您正在从“.nav li”添加和删除活动类，但在css中您正在设置“li>a.active”的样式。因此，您需要将css更改为'li.active'或将javascript更改为
var selector=.nav li a
，以匹配css样式
 您可以这样做：


var选择器='.nav li'；
$（选择器）。在（'单击'）上，函数（e）{
$（'>a'，选择器）.removeClass（'active'）；//只需将该类删除到锚点
$（'>a'，this.addClass（'active'）；//将类添加到当前锚点
//$（选择器）。查找（'>a'）===$（'>a'，选择器）
e、 stopPropagation（）；//停止bubbleup的事件
});
li>a.active{
背景色：#000；
}

















您可以执行以下操作：


var选择器='.nav li'；
$（选择器）。在（'单击'）上，函数（e）{
$（'>a'，选择器）.removeClass（'active'）；//只需将该类删除到锚点
$（'>a'，this.addClass（'active'）；//将类添加到当前锚点
//$（选择器）。查找（'>a'）===$（'>a'，选择器）
e、 stopPropagation（）；//停止bubbleup的事件
});
li>a.active{
背景色：#000；
}

















看看这把小提琴

您应该为查询使用另一个选择器。还可以使用.toggleClass（）添加/删除类

    var selector = '.nav li a';
    $(selector).on('click', function(e) {
      $(selector).toggleClass('active');
      e.stopPropagation();
    });

看这把小提琴

您应该为查询使用另一个选择器。还可以使用.toggleClass（）添加/删除类

    var selector = '.nav li a';
    $(selector).on('click', function(e) {
      $(selector).toggleClass('active');
      e.stopPropagation();
    });

我将您的答案标记为解决方案，因为您的代码在JSFIDLE中正常工作，但在我的菜单上它不能正常工作。我想是别的原因造成了问题，但我不知道是什么原因。为了描述这个问题，当我按下菜单上的按钮时，什么都没有发生，它不会被选中，但是当我点击页面上的其他地方之后，就会显示所需的背景。此外，这不适用于下拉菜单-它保留bootstrap3中的默认灰色。我可以将导航菜单上传到主机并共享，如果这对您有帮助的话。请尝试CSS
li>a.active:focus
这与以前一样。我将您的答案标记为解决方案，因为您的代码在JSFIDLE中正常工作，但在我的菜单上它不能正常工作。我想是别的原因造成了问题，但我不知道是什么原因。为了描述这个问题，当我按下菜单上的按钮时，什么都没有发生，它不会被选中，但是当我点击页面上的其他地方之后，就会显示所需的背景。此外，这不适用于下拉菜单-它保留bootstrap3中的默认灰色。我可以将导航菜单上传到主机并共享，如果这对我有帮助的话。尝试CSS
li>a.active:focus
与以前一样