Change Background Color When <li> is Active using Javascript

Question

I want to change background color of <li> where the class is active, when I click on those li > a. How can I do it in this case. He is what I have tried:

Script

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

Style

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

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

@user3001046 Why not pure CSS? .sidebar-collapse .nav > li > a.active {background-color: transparent;} — Yury Tarabanko
– Yury Tarabanko, Commented Jul 21, 2014 at 8:39

Yury Tarabanko · Accepted Answer · 2014-07-21 10:59:39Z

1

If you are somewhy bounded to js solution you need to use css. Since background is not an attribute but a style and can't be "removed".

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

Or a pure CSS solution. Which is preferred:

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

edited Jul 21, 2014 at 10:59

answered Jul 21, 2014 at 8:44

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3001046 Over a year ago

You will change like this .sidebar-collapse .nav > li.active > a { background-color: transparent; }

Collectives™ on Stack Overflow

Change Background Color When <li> is Active using Javascript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related