侧边栏菜单与内容切换效果代码示例 - Javascript 实现

<script>
    var menuItems = document.querySelectorAll('#menu-item'); // 获取所有菜单项
    var contentItems = document.querySelectorAll('#content-item'); // 获取所有内容项
    
    for(var i = 0; i < menuItems.length; i++){ // 循环遍历菜单项
        menuItems[i].addEventListener('click', function(){
            var activeMenu = document.querySelector('.active'); // 获取当前被选中的菜单项
            activeMenu.classList.remove('active'); // 移除当前被选中的菜单项的active类
            this.classList.add('active'); // 添加被点击的菜单项的active类
            var index = Array.prototype.indexOf.call(menuItems, this); // 获取被点击的菜单项的索引值
            for(var j = 0; j < contentItems.length; j++){ // 循环遍历内容项
                contentItems[j].classList.remove('active'); // 移除所有内容项的active类
            }
            contentItems[index].classList.add('active'); // 给被点击的菜单项对应的内容项添加active类
        });
    }
</script>