Open In App

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

Last Updated : 14 Dec, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

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:

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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:

navBG

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=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </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:

navBG

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.



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads