Question

我正在尝试按按钮更改列表中文本的颜色。我的麻烦是当我尝试在应用“选定”颜色之前尝试使颜色在其他列表项上重设时。查看代码：

    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>

因此，此刻，文本在单击时变为红色，但是其他颜色（如果已经为红色）不会设置为黑色并保持红色。

有什么想法吗？谢谢

Answer 1

正如Alex所指出的，您的文本位于<a></a>标记之间。解决该问题的最简单方法是添加firstChild（如document.getElementById("navAbout").firstChild.style.color ="black"）。更好的方法是使用类，因为使用样式属性通常不是一个好习惯（read more about adding and removing classes here）。

Answer 2

您的事件处理程序当前正在直接处理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函数仍将起作用。

但是我们可以更进一步，并实施 event delegation 策略。
有几个优点，这使得稍后可以通过编程方式自动添加导航项，并自动受益于ul#navigation注册的 click 事件处理程序行为。它还限制了附加到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>

Answer 3

您可以使用类似这样的内容，或者更改选择器，但是您需要使用querySelectorAll：

function changeNavColour(clicked_id) {
    x=document.querySelectorAll("a")
    x.forEach(function(item){
      item.style.color = "black";
    })
     clicked_id.style.color = "#c60707";
}

希望获得帮助。

更改列表文字颜色时遇到问题

3 个答案:

编辑