如何在Bootstrap 4的自定义列表组中的click事件上添加活动类？

在Bootstrap 4中，Javascript或jQuery事件用于在自定义列表组的click事件中添加活动类。

句法：

$(document).ready(function() {
    $('selector').click(function() {
        $('selector.active').removeClass("active");
        $(this).addClass("active");
    });
});

以下示例说明了如何使用jQuery以不同方式在自定义列表组的click事件中添加活动类。

示例1：下面的示例说明如何使用jQuery通过for循环在自定义列表组的click事件中添加活动类。

    
  
    
      
    
  
    
    
  
    
    
  
    
    

  

    
        
            GeeksforGeeks
            Active Item in a List Group
        
    
      
    
        
              
            
                DSA Courses Available soon
                1 days ago
            
              
            
                This course is will take you from basics
                to advance as well as it will certify you
                on the basis of your performance.
            
              
            Students, Working Professionals
        
          
        
              
            
                Placement 100
                2 days ago
            
              
            
                This course will guide you for placements
                with theory, lecture videos, weekly
                assessments, contests and doubt assistance.
            
              
            Pre-final, Final year students
        
          
        
              
            
                
                    Machine Learning Foundation With Python
                
                4 days ago
            
              
            
                Learn about the concepts of Machine Learning,
                effective machine learning techniques from
                basics with Python.
            
              
            
                Students, Working Professionals
                seeking a career in ML
            
        
    
      
    
        $(".list-group-item").click(function() {
              
            // Select all list items
            var listItems = $(".list-group-item");
              
            // Remove 'active' tag for all list items
            for (let i = 0; i < listItems.length; i++) {
                listItems[i].classList.remove("active");
            }
              
            // Add 'active' tag for currently selected item
            this.classList.add("active");
        });
    

  

输出：

示例2：下面的示例说明如何使用jQuery以及jQuery类属性操作的addClass和removeClass在自定义列表组中的click事件上添加活动类。

  

    
    
    
    
    
    
    
    
    

  

  
    
        GeeksforGeeks
        Active Item in a List Group
        
            Active item
            Click me to active item
            Click me too active item item
        
    
    
        $(document).ready(function() {
            $('li').click(function() {
                $('li.list-group-item.active').removeClass("active");
                $(this).addClass("active");
            });
        });
    

  

输出：