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

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

句法：

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

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

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

    
  
    
      
    
  
    
    
  
    
    
  
    
    

  

    
        
            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 在自定义列表组中的单击事件上添加活动类。

  

    
    
    
    
    
    
    
    
    

  

  
    
        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");
            });
        });
    

  

输出：

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。