我向?qū)Ш綑谔砑恿艘粋€(gè) li，突然間，每當(dāng)我單擊菜單項(xiàng)時(shí)，它就不再滾動(dòng)。我需要使用 Javascript 讓我的導(dǎo)航欄滾動(dòng)到我的部分。這是我用 Javascript 創(chuàng)建的導(dǎo)航欄const navMenu = document.querySelectorAll("section");const navList = document.getElementById("navbar__list");const items = ["Section 1", "Section 2", "Section 3", "Section 4"];//Build the navitems.forEach((item, i) => { const el = document.createElement("a"); el.innerText = item; el.classList.add("menu-items"); el.setAttribute("id", `menu-${i + 1}`); el.href = `#section${i + 1}`; navList.appendChild(el); const li = document.createElement("li"); li.classList.add("menu-list"); li.appendChild(el); // Append the list item to the list navList.appendChild(li);});//Make Nav Active when Clicked and scrolls down to sectiondocument.addEventListener("click", function (event) { let active = document.querySelector(".menu-list.active"); if (active) active.classList.remove("active"); if (event.target.classList.contains("menu-list")) { event.target.classList.add("active"); }});在我只添加了 a 標(biāo)簽之前，我在 addEventListener 中定位了 .menu-items 而不是 .menu-list，但是一旦我將 li 標(biāo)簽添加到我的導(dǎo)航欄，li 的類就不起作用了。我不確定要編輯或更改什么
1 回答
函數(shù)式編程
TA貢獻(xiàn)1807條經(jīng)驗(yàn) 獲得超9個(gè)贊
系統(tǒng)的想法是給菜單項(xiàng)一個(gè) id 并使用 id 在這里滾動(dòng)你忘了給 element 提供 id 。然后我將其放在您的點(diǎn)擊事件中，使用此 id 獲取該部分的 id 和 href。
items.forEach((item, i) => {
const el = document.createElement("a");
el.innerText = item;
el.classList.add("menu-items");
el.setAttribute("id", `menu-${i + 1}`);
el.href = `#section${i + 1}`;
navList.appendChild(el);
const li = document.createElement("li");
li.classList.add("menu-list");
li.appendChild(el);
li.setAttribute("id", `${i + 1}`);
// Append the list item to the list
navList.appendChild(li);
});
//Make Nav Active when Clicked and scrolls down to section
document.addEventListener("click", function (event) {
let active = document.querySelector(".menu-list.active");
if (active) active.classList.remove("active");
if (event.target.classList.contains("menu-list")) {
event.target.classList.add("active");
console.log(event.target.id);
window.location.href="#section"+event.target.id
}
});
- 1 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消