How to change the background color of the active nav-item?

Last Updated : 25 Jul, 2024

In this article, we will learn how we can change the background of the active nav item with the help of CSS and jQuery. Given an HTML document containing a list of items, the task is to change the background color of a particular list item when it is active or clicked.

We can change the background color of the active list item using the below approaches:

Table of Content

By adding and removing classes
By using the css() method of jQuery

By adding and removing classes

In this method, we will use the background-color property of CSS inside the classes and use those classes to change the background color on clicking the element using the addClass() and removeClass() methods of jQuery.

Syntax:

$('element_selector').addClass() / removeClass()

Example: The below code example will explain the use of the addClass and removeClass methods to change the background color of the active item.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src=
"https://npmcdn.com/[email protected]/dist/js/tether.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
    </script>

    <style>
        .nav-link {
            color: green;
        }

        .nav-item>a:hover {
            color: green;
        }

        /*code to change background color*/
        .navbar-nav>.active>a {
            background-color: #C0C0C0;
            color: green;
        }
    </style>
    <title>
        How to change the background 
        color of the active nav-item?
    </title>
</head>

<body>
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                Home 
                <span class="sr-only">
                    (current)
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                GeeksForGeeks Interview Prep
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                GeeksForGeeks Courses
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled"
                href="#">Disabled</a>
        </li>
    </ul>

    <script>
        $(document).ready(function () {

            $('ul.navbar-nav > li')
                    .click(function (e) {
                $('ul.navbar-nav > li')
                    .removeClass('active');
                $(this).addClass('active');
            });
        });
    </script>
</body>

</html>

Output:

By using the css() method of jQuery

In this approach, we will use the css() method of jQuery which is used to add the dynamic styles to the selected element. It takes the CSS property name and its value as parameter in the form of strings and add the defined styles to the selected element on the occurrence of an event.

Syntax:

$('selected_element').css('propert_name', 'value');

Example: The below example will illustrate the use of the css() method to change the background color of the active list item.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css"/>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <script src=
"https://npmcdn.com/[email protected]/dist/js/tether.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js">
    </script>

    <style>
        .nav-link {
            color: green;
            text-align: center;
        }

        .nav-item>a:hover {
            color: green;
        }
    </style>
    <title>
        How to change the background 
        color of the active nav-item?
    </title>
</head>

<body>
    <ul class="navbar-nav">
        <li class="nav-item active">
            <a class="nav-link" href="#">
                Home 
                <span class="sr-only">
                    (current)
                </span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                GeeksForGeeks Interview Prep
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">
                GeeksForGeeks Courses
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled"
                href="#">Disabled</a>
        </li>
    </ul>

    <script>
        $(document).ready(function () {
            $('ul.navbar-nav > li').click(function (e) {
                $('ul.navbar-nav > li').css('background-color', 'transparent');
                $(this).css('background-color', '#c0c0c0');
            });
        });
    </script>
</body>

</html>

Output:

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.