如何更改活动导航项的背景颜色？

给定一个包含项目列表的 HTML 文档，任务是在项目处于活动状态时更改项目列表的背景颜色。可以通过更改 background-color CSS 属性来更改项目列表的状态。

句法：

background-color: color | transparent; 

属性值：

• color：它指定元素的背景颜色。
• 透明：它指定背景颜色应该是透明的。

因此，可以通过更改 background-color CSS 属性以下列方式更改活动导航项的背景颜色。

句法 ：

.navbar-nav > .active > a { 
    background-color: color ; 
}

例子：

html

  

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

  

    
    
    
    
    
    
    
  
    
        .nav-link {
            color: green;
        }
  
        .nav-item>a:hover {
            color: green;
        }
  
        /*code to change background color*/
        .navbar-nav>.active>a {
            background-color: #C0C0C0;
            color: green;
        }
    
    
        
            
                Home 
                
                    (current)
                
            
        
        
            
                GeeksForGeeks Interview Prep
            
        
        
            
                GeeksForGeeks Courses
            
        
        
            Disabled
        
    
  
    
        $(document).ready(function () {
  
            $('ul.navbar-nav > li')
                    .click(function (e) {
                $('ul.navbar-nav > li')
                    .removeClass('active');
                $(this).addClass('active');
            });
        });
    

  

输出：