js——点击切换按钮高亮显示

1.效果图

2.html

                

                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                    
热门商品
                    
手机数码
                    
京东超市
                    
家用电器
                    
电脑办公
                
            

3.js，排他思想

 // 获取元素
        let li = document.querySelectorAll('.left-section li');
     
        // 高亮显示,排他,利用双重forEach,先去除active,再给点击内容单独添加active
        li.forEach((item,index) => {
            item.onclick = (e) => {
                e.stopPropagation();
                li.forEach(i => {
                    i.classList.remove('active')
                })
                
                item.classList.add('active')
            }
        })