Question

当我点击<li>时，我想更改课程处于活动状态的li > a的背景颜色。在这种情况下我该怎么做呢。他就是我的尝试：

脚本

<script>
    $('.sidebar-collapse .nav > li > a').click(function (e) {
        var $this = $(this);
        if ($this.hasClass('active')) {
            $this.removeAttr('background');
        }
    });
</script>

风格

.sidebar-collapse .nav > li > a {
    background: #EFEFEF;
    text-shadow: none;
    color: #595959;
    border-top: 1px solid #dfdfdf;
}

菜单列表HTML

<nav class="navbar-default navbar-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav" id="main-menu">
            <li>
                <a href="default.aspx"><i class="fa fa-desktop "></i>Dashboard</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-edit "></i>UI Elements<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#">Notifications</a>
                    </li>
                    <li>
                        <a href="#">Elements</a>
                    </li>
                    <li>
                        <a href="#">Free Link</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-table "></i>Table Examples</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-edit "></i>Forms </a>
            </li>
            <li>
                <a href="#"><i class="fa fa-sitemap "></i>Multi-Level Dropdown<span class="fa arrow"></span></a>
                <ul class="nav nav-second-level">
                    <li>
                        <a href="#">Second Level Link</a>
                    </li>
                    <li>
                        <a href="#">Second Level Link</a>
                    </li>
                    <li>
                        <a href="#">Second Level Link<span class="fa arrow"></span></a>
                        <ul class="nav nav-third-level">
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                            <li>
                                <a href="#">Third Level Link</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#"><i class="fa fa-qrcode "></i>Tabs & Panels</a>
            </li>
            <li>
                <a href="#"><i class="fa fa-bar-chart-o"></i>Mettis Charts</a>
            </li>

            <li>
                <a href="#"><i class="fa fa-edit "></i>Last Link </a>
            </li>
            <li>
                <a href="blank.aspx"><i class="fa fa-table "></i>Blank Page</a>
            </li>
        </ul>
    </div>
</nav>

Answer 1

如果您对js解决方案有所了解，则需要使用css。由于background不是属性而是样式，因此无法“删除”。

$('.sidebar-collapse .nav > li > a').click(function (e) {
    var li = $(this).closest('li');
    if (li.hasClass('active')) {
        li.css('background-color', 'transparent'); //or inherit
    }
});

或纯CSS解决方案。哪个更受欢迎：

.sidebar-collapse .nav > li.active > a {
    background-color: transparent;
}

使用Javascript <li>处于活动状态时更改背景颜色</li>

1 个答案: