要實現菜單隨著內容切換，你可以使用jQuery來監聽內容的變化并相應地改變菜單項的狀態或樣式。
以下是一個簡單的示例代碼：
<!DOCTYPE html><html>
<head>
<title>菜單切換</title>
<style>
.menu-item {
display: none;
}
.active {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li class="menu-item active">菜單1</li>
<li class="menu-item">菜單2</li>
<li class="menu-item">菜單3</li>
</ul>
<div class="content">
<div class="content-item active">內容1</div>
<div class="content-item">內容2</div>
<div class="content-item">內容3</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 監聽菜單項點擊事件
$('.menu-item').click(function() {
// 移除所有菜單項的 active 類
$('.menu-item').removeClass('active');
// 添加當前菜單項的 active 類
$(this).addClass('active');
// 獲取當前菜單項的索引
var index = $(this).index();
// 隱藏所有內容項
$('.content-item').hide();
// 顯示對應索引的內容項
$('.content-item').eq(index).show();
});
});
</script>
</body>
</html>
在這個示例中，我們使用了一個包含菜單項和內容項的簡單頁面結構。初始狀態下，第一個菜單項和對應的內容項都被設置為 active 類，其他菜單項和內容項則隱藏。
通過jQuery，我們監聽了菜單項的點擊事件，并在點擊時執行相應的操作。當點擊某個菜單項時，我們移除所有菜單項的 active 類，并將當前點擊的菜單項添加 active 類。同時，我們獲取當前點擊菜單項的索引，然后隱藏所有內容項并顯示對應索引的內容項。
這樣，每次點擊菜單項時，就會相應地切換菜單和內容的狀態。
