无法更改列表文本颜色
[英]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.