在 Web 開發中，導航欄是一個非常基礎且常見的組件。而頁面之間的切換也是非常必要的。CSS 提供了很多方法來實現這種切換效果，下面我們就來一一學習一下。 首先，我們需要為導航欄添加必要的樣式，讓其具有交互效果。以下是基本的樣式代碼：

nav {
background-color: #333;
overflow: hidden;
display: flex;
justify-content: space-around;
list-style: none;
font-size: 1.2em;
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 999;
}
nav li {
float: left;
color: #fff;
line-height: 40px;
padding: 0 20px;
cursor: pointer;
}
nav li:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}

通過上面的代碼，我們定義好了導航欄的背景樣式以及文字等樣式。接下來，我們需要為每個導航項添加點擊事件。

nav li:nth-child(1) { /* 第一個導航項 */
background-color: #4CAF50;
}
nav li:nth-child(2) {
background-color: #008CBA;
}
nav li:nth-child(3) {
background-color: #f44336;
}
nav li:nth-child(4) {
background-color: #555555;
}
// 為導航項添加點擊事件
nav li:nth-child(1).active ~ .content :nth-child(1),
nav li:nth-child(2).active ~ .content :nth-child(2),
nav li:nth-child(3).active ~ .content :nth-child(3),
nav li:nth-child(4).active ~ .content :nth-child(4) {
display: block;
}

通過上面的代碼，我們為每個導航項添加了不同的背景顏色，并且為其添加了點擊事件。當用戶點擊某個導航項時，我們會為其添加一個 `.active` 類，同時也會顯示對應的頁面內容。 最后，我們需要為每個頁面內容添加相應的樣式：

.content {
display: none;
padding-top: 50px;
}
.content div {
width: 90%;
margin: 0 auto;
text-align: center;
background-color: #f2f2f2;
height: 500px;
border: 1px solid #ddd;
box-shadow: 0 3px 5px #ccc;
}

通過上面的代碼，我們為頁面內容添加了一些基本的樣式，如寬度、高度、邊框等。這樣，我們就可以實現一個簡單的導航切換效果了。 總結：CSS 導航切換頁面效果是 Web 開發中非常基礎的一個功能。通過對樣式和點擊事件的處理，我們可以實現一個簡單但功能齊全的導航欄。同時，我們也可以使用 JavaScript 或者 jQuery 對代碼進行優化，提升用戶體驗。