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

米哈伊尔·伊万切夫(Mikhail Ivanchev)

我有此响应式可折叠菜单。

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

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

rk

更改selector.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();
});

演示

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

无法在 CSS 菜单中设置活动类

如何顺序设置菜单元素的动画

无法使用CSS设置Jquery元素的样式

通过下拉菜单设置SVG元素的样式

取消:活动元素样式

当输入成为焦点时如何设置表单元素的样式?

设置垫菜单样式

无法为 Label 元素的子元素设置样式

PHPExcel:无法设置合并单元格的样式

如何在VS Code的活动栏中设置活动元素的样式?

在if / else代码块中无法正确设置元素样式

无法解决如何设置某些Google Map元素的样式

设置“共享”操作菜单的样式

如何在JS和React Router中使用CSS设置活动链接子元素的样式?

有没有一种方法可以设置活动书签元素的样式?

设置下拉菜单React Native的最后一个元素的样式

如何在导航菜单中为两个元素设置活动背景色

JS关闭菜单元素点击菜单

如何在angular-schema-form模式而不是在form中设置表单元素的样式?

如何在输入上方的标签上设置HtmlService表单元素的样式?

无法在移动菜单视图中正确设置嵌套列表的样式

阴谋的下拉菜单无法正确地重新设置“ y”的样式

PrimeNG元素未设置范围,无法使用默认的Angular 2 ViewEncapsulation(模拟)设置样式

使用jQuery设置元素样式

在元素上设置验证样式

无法使用基于文本的 jQuery 对单个单元格进行样式设置

离子覆盖活动元素css样式

在angular中更改活动元素的CSS样式

Microsoft UI自动化无法获取chrome的上下文菜单元素