盡管我的代碼與教程中顯示的代碼相同，但在向下滾動時我無法使用 classList.remove('active') 我也在關注當我單擊 #search-btn 時，它不會從導航欄中洗掉活動類
let searchForm = document.querySelector('.search-form');
document.querySelector('#search-btn').onclick = () => {
searchForm.classList.toggle('active');
navbar.classList.remove('active');
}
let navbar = document.querySelector('.nav_bar');
document.querySelector('#menu-btn').onclick = () => {
navbar.classList.toggle('active');
searchForm.classList.remove('active');
}
window.onscroll = () => {
searchForm.classList.remove('active');
navbar.classList.remove('active');
{
if (window.scrollY > 0) {
document.querySelector('.header').classList.add('active');
} else {
document.querySelector('.header').classList.remove('active');
}
}
}
I am not able to use the classList.remove('active')when scroll down despite my code is same as shown in the tutorial i am following
同樣，當我單擊 #search-btn 時，它不會從導航欄中洗掉活動類
the html code i use contain nav_bar class in nav and search-form class in form in these classes i am not able to add .active class by using queryselector
<nav class="nav_bar">
<a href="#home">home</a>
<a href="#offers">offers</a>
<a href="#destinations">destinations</a>
<a href="#packages">packages</a>
<a href="#contact">contact</a>
</nav>
<div class="icons">
<div id="menu-btn" class="fas fa-solid fa-bars"></div>
<div id="search-btn" class="fas fa-solid fa-search"></div>
<div class="fas fa-solid fa-shopping-cart"></div>
<div class="fas fa-solid fa-user"></div>
</div>
<form action="" class="search-form">
<input type="search" placeholder="search here ...."
id="input-
box">
<label for="input-box" class="fas fa-search"></label>
</form>
</header>
uj5u.com熱心網友回復：
首先，我需要更多背景關系 (html) 來了解為什么您的按鈕單擊無法正常作業。盡管如此，我可以給你一個為什么滾動部分不起作用的答案。
首先，您需要更改if (window.screenY > 0)為window.scrollY > 0以獲取滾動的實際位置。
然后更改document.querySelectorAll('.header')為document.querySelector('.header')因為querySelectorAll為您提供了一個節點串列，您必須單獨更改所有節點才能實作您的目標。
正如我所說，如果你給我更多的背景關系，我也可以研究你的第二個問題。
uj5u.com熱心網友回復：
你有這個問題：
if (window.screenY > 0) {
document.querySelectorAll('.header').classList.add('active');
} else {
document.querySelectorAll('.header').classList.remove('active');
}
querySelectorAll 回傳具有類頭的所有元素的集合。
如果你知道你只有一個這樣的元素，那么你可以使用 document.querySelector('.header') 因為它會選擇它遇到的第一個元素。
但是，如果您有多個并且想要全部選擇它們，則需要遍歷集合中的每一個，例如使用：
document.querySelectorAll('.header').forEach
使用瀏覽器的開發工具檢查工具，您將看到您的代碼給出錯誤，因為它試圖找到空元素的 classList，給定 querySelectorAll 回傳一個集合而不是單個元素。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318148.html
標籤：javascript html css dom
上一篇：如何在javascript中使用dom獲取用戶輸入的陣列和陣列元素的大小？
下一篇：科拉茲猜想