無法更改列表文本顏色
[英]Trouble changing list text colour
問題描述
我正在嘗試在按下按鈕時更改列表中文本的顏色。 我的麻煩是當我試圖在應用“選定”顏色之前在其他列表項上重置顏色時。 見代碼：
function changeNavColour(clicked_id) { document.getElementById("navAbout").style.color = "black"; document.getElementById("navShows").style.color = "black"; document.getElementById("navPrices").style.color = "black"; clicked_id.style.color = "#c60707"; } <html> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening" onclick="changeNavColour(event.target);">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings" onclick="changeNavColour(event.target);">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing" onclick="changeNavColour(event.target);">PRICES</a></li> </ul> </nav> </html>所以目前，文本在點擊時變為紅色，但其他顏色（如果它們已經是紅色）不會設置為黑色並保持紅色。
有任何想法嗎？ 謝謝
3 個解決方案
解決方案1
0 已采納 2019-10-02 11:12:58
正如亞歷克斯已經指出的那樣，您的文本位於<a></a>標記之間。 修復它的最簡單方法是添加 firstChild （如document.getElementById("navAbout").firstChild.style.color ="black" ）。 更好的方法是使用類，因為使用樣式屬性通常不是一個好習慣（在此處閱讀有關添加和刪除類的更多信息）。
解決方案2
0 2019-10-02 11:18:57
您的事件處理程序當前正在直接處理 HTMLAnchorElement 引用，而不是 id 屬性值。 請參閱 Javascript 片段注釋。
function changeNavColour(anchorElement) { // Look for every anchor tag within the navigation list document.getElementById('navigation').querySelectorAll('a').forEach(a => { // Change their color depending on supplied anchor reference (the event target reference) a.style.color = a === anchorElement? "#c60707": 'black' }); }
<.-- Keep your markup as is --> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening" onclick="changeNavColour(event;target).">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings" onclick="changeNavColour(event;target).">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing" onclick="changeNavColour(event;target);">PRICES</a></li> </ul> </nav>
編輯
照原樣，單個錨id不再硬編碼，這意味着當您從導航列表中添加或刪除項目時，Javascript function 仍然可以工作。
但是我們可以更進一步，實現事件委托策略。
有幾個優點，它可以在以后以編程方式添加導航項，並自動受益於ul#navigation注冊的單擊事件處理程序行為。 它還限制了附加到 DOM 的事件偵聽器的數量（這通常不是問題，但它是優化並且可以被視為最佳實踐 IMO），：
document.getElementById('navigation').addEventListener('click', function(evt) { const anchor = evt.target instanceof HTMLAnchorElement && evt.target; if (anchor) { // Look for every anchor tag within the navigation list // Event handler is attached to the ul#navigation // so "this" keyword is a reference to the uordered list HTML element this.querySelectorAll('a').forEach(a => { // Change their color depending on supplied anchor reference (the event target reference) a.style.color = a === anchor? "#c60707": 'black' }); } });
<!-- Keep your markup as is --> <nav class='navigation' id='navigation'> <ul class="navbar" id='nav'> <li class="navbar-item" id='navAbout'><a href="#GrandReopening">ABOUT</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navShows'><a href="#current-screenings">SHOWS</a></li> <li class='navbar-item'>-</li> <li class="navbar-item" id='navPrices'><a href="#standardpricing">PRICES</a></li> </ul> </nav>
解決方案3
0 2019-10-02 11:19:36
您可以使用類似的東西，或者使用 querySelectorAll 更改您需要的選擇器：
function changeNavColour(clicked_id) {
x=document.querySelectorAll("a")
x.forEach(function(item){
item.style.color = "black";
})
clicked_id.style.color = "#c60707";
}
希望這有幫助。
如何根據動態變化的背景顏色動態更改文本顏色
[英]How to dynamically change text colour based on dynamically changing background colour
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.