css導航欄點擊固定樣式

在網站制作中，導航欄是非常重要的元素，它不僅能夠起到引導用戶的作用，還能提高網站的視覺效果。當我們使用CSS設計導航欄時，常常需要實現點擊后固定樣式。那么如何實現呢？下面我們來看一下代碼實現的方法：

/* 定義導航欄樣式 */
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
float: left;
margin-right: 10px;
}
a {
display: block;
padding: 5px 10px;
background-color: #ccc;
color: #000;
}
/* 實現導航欄點擊后固定樣式 */
a.active {
background-color: #000;
color: #fff;
}
/* JavaScript代碼 */
var links = document.getElementsByTagName('a');
for (var i = 0; i< links.length; i++) {
links[i].onclick = function() {
// 先將所有a元素的class刪除
for (var j = 0; j< links.length; j++) {
links[j].classList.remove('active');
}
// 在當前點擊的a元素上添加class
this.classList.add('active');
}
}

在上面的代碼中，我們首先定義了導航欄的基本樣式，然后通過JavaScript代碼實現了點擊導航欄時添加固定樣式的效果。具體實現過程如下：