CSS 切換導航教程
在網頁設計中，導航菜單是一個非常重要的組成部分。通常情況下，我們需要在導航和頁面之間切換。為了實現這一點，我們可以使用 CSS 切換導航。
我們可以用 CSS 來切換不同的導航樣式。這可以通過添加類名來實現，然后通過 JavaScript 來激活它們。下面是一些基本示例：
HTML 代碼：
``````
CSS 代碼：
```
.nav1 {
color: #000;
background-color: #fff;
}
.nav2 {
color: #fff;
background-color: #000;
}
.nav3 {
color: #fff;
background-color: #ff0000;
}
```
在 JavaScript 中，我們可以編寫以下代碼：
```
var navLinks = document.querySelectorAll('nav ul li a');
for (var i = 0; i< navLinks.length; i++) {
navLinks[i].addEventListener('click', function(e) {
e.preventDefault();
var currentLink = e.currentTarget;
var navClass = currentLink.getAttribute('class');
document.body.setAttribute('class', navClass);
});
}
```
這段代碼做的事情是：當單擊導航鏈接時，阻止默認行為，獲取當前鏈接的類名，添加該類名到 body 標簽上。
我們需要確保該代碼在頁面加載后執行，可以將其包裝在以下代碼塊中：
```
(function() {
// JavaScript 代碼
})();
```
完成這些步驟后，我們就可以通過單擊不同的導航鏈接來切換不同的導航樣式了。
總結：
CSS 導航切換是一個非常實用的技術，使我們可以輕松地改變網站的外觀。通過添加類名和 JavaScript，我們可以在不同的導航和頁面之間切換。
上一篇css分頁實例