原生js——点击左侧导航栏切换内容并按钮高亮显示

1.效果图

2.html

<div class="left-section">
                <ul>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                    <li>热门商品</li>
                    <li>手机数码</li>
                    <li>京东超市</li>
                    <li>家用电器</li>
                    <li>电脑办公</li>
                </ul>
            </div>

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')
            }
        })

4.css

.active{
    color: red;
    background-color: white;
}

5.end:视频中更详细的博客地址h5页面---仿京东移动端分类导航栏,点击左侧导航栏按钮切换内容,点击左侧按钮自动跳转到页面顶部-CSDN博客