css菜單切換內容切換是前端開發中常見的操作方式，可以使網頁更為直觀和易于操作。下面介紹一些相關知識。

/* css菜單切換內容切換 */
.menu {
display: flex;
justify-content: space-between;
/* 設置菜單項之間的間距 */
gap: 10px;
}
.menu-item {
/* 設置菜單項的樣式 */
padding: 10px;
background-color: #ccc;
/* 設置鼠標懸停時的樣式 */
&:hover {
background-color: #eee;
cursor: pointer;
}
/* 設置選中時的樣式 */
&.active {
background-color: #fff;
font-weight: bold;
}
}
.content {
/* 設置內容的樣式 */
margin-top: 20px;
background-color: #f0f0f0;
padding: 20px;
/* 隱藏不被選中的內容 */
>div:not(.active) {
display: none;
}
}
/* js實現菜單切換內容切換 */
const menuItems = document.querySelectorAll('.menu-item');
const contents = document.querySelectorAll('.content >div');
menuItems.forEach((item, index) =>{
item.addEventListener('click', () =>{
// 切換選中的菜單項
menuItems.forEach(item =>item.classList.remove('active'));
item.classList.add('active');
// 切換對應的內容
contents.forEach(content =>content.classList.remove('active'));
contents[index].classList.add('active');
});
});

以上代碼是一個簡單的css菜單切換內容切換效果的實現。通過設置菜單項的樣式和選中時的樣式，結合js實現菜單項和對應內容的切換。