我有一個帶有網站頁面的側邊欄。我想在單擊時更改當前選定頁面的顏色，將類 is-active 分配給當前選定的專案，并將其從所有其他專案中洗掉。這是HTML：
<aside id="side-bar" class="sidebar">
<h3>Pages</h3>
<nav class="menu">
<a onclick="changeColor()" class="menu-item is-active">page 1</a>
<a onclick="changeColor()" class="menu-item">page 2</a>
<a onclick="changeColor()" class="menu-item">page 3</a>
</nav>
</aside>
和 CSS：
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: #f1672c;
border-right: 6px solid #f1672c;
}
每個元素都具有更改顏色的功能，該功能應采用所有元素，從先前選定的元素中洗掉 is-active 類并添加到當前單擊的元素中。
function changeColor(){
var links = document.getElementsByClassName("menu-item")
links.map(classList.remove("is-active"))
this.classList.add("is-active")
}
我錯過了什么？
uj5u.com熱心網友回復：
那changeColor()是沒有必要的......
const pages = document.querySelectorAll(".menu-item");
pages.forEach((item) => {
item.addEventListener('click', active_item);
})
function active_item () {
pages.forEach((item) => {
item.classList.remove('is-active');
});
this.classList.add('is-active');
}.is-active {
background-color: red;
}<aside id="side-bar" class="sidebar">
<h3>Pages</h3>
<nav class="menu">
<a class="menu-item is-active">page 1</a>
<a class="menu-item">page 2</a>
<a class="menu-item">page 3</a>
</nav>
</aside>uj5u.com熱心網友回復：
function changeColor(){
var links = document.getElementsByClassName("menu-item")
links.map(classList.remove("is-active"))
this.classList.add("is-active")
}
該代碼的一些內容：
getElementsByClassName不回傳常規陣列，因此您不能直接使用map,forEach和其他函式，請querySelectorAll改用map和其他陣列函式將函式作為引數，呼叫應該類似于links.forEach(link => link.classList...)- 在您的情況下
this是window元素，如果您想從onclick屬性傳遞元素，然后使用changeColor(this)
考慮到這一切，這就是你所擁有的
function changeColor(el) {
var links = document.querySelectorAll(".menu-item")
links.forEach(link => link.classList.remove("is-active"))
el.classList.add("is-active")
}.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: #f1672c;
border-right: 6px solid #f1672c;
}<aside id="side-bar" class="sidebar">
<h3>Pages</h3>
<nav class="menu">
<a onclick="changeColor(this)" class="menu-item is-active">page 1</a>
<a onclick="changeColor(this)" class="menu-item">page 2</a>
<a onclick="changeColor(this)" class="menu-item">page 3</a>
</nav>
</aside>uj5u.com熱心網友回復：
只需使用 . 傳遞當前元素的參考即可this。
function changeColor(el){
document.querySelector(".menu-item.is-active").classList.remove("is-active")
el.classList.add("is-active")
}.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: #f1672c;
border-right: 6px solid #f1672c;
}<aside id="side-bar" class="sidebar">
<h3>Pages</h3>
<nav class="menu">
<a onclick="changeColor(this)" class="menu-item is-active">page 1</a>
<a onclick="changeColor(this)" class="menu-item">page 2</a>
<a onclick="changeColor(this)" class="menu-item">page 3</a>
</nav>
</aside>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/497315.html
標籤：javascript html