javascript - 根据事件选项卡更改文本颜色

Question

根据我在这里发布的问题 Unable to add a background colour to the button in navigation

我已经设法解决了我的问题并继续我的工作，但是，我遇到的一个问题是根据事件选项卡更改导航栏元素的字体颜色。 “当前事件”选项卡通过 CSS 赋予了正确的颜色，所以我希望 CSS 部分是正确的，从而使 JavaScript 部分成为一个问题。

var header = document.getElementById("navbar");
var btns = header.getElementsByClassName("topnavbar");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

 .active {
    text-decoration: none;
    color: #4da6ff;
    outline: none;  
 }

<div id="navbar" >
   <ul>
       <li> <a class="topnavbar active" href="" id="home"title="Home">HOME </a> </li>
       <li> <a class="topnavbar"        href="" id="movies" title="Movies">MOVIES </a> </li>
       <li> <a class="topnavbar"        href="" id="theaters" title="Theaters">THEATERS </a></li>
       <li> <a class="topnavbar"        href="" id="buytickets" title="Buy Tickets Online">BUY TICKETS ONLINE </a> </li>
       <li style="float:right"><a class="btn btn-scope1 navbar-btn" id="btn1" href="">TEST YOUR KNOWLEDGE </a> </li>	
    </ul>	
</div>

我做错了什么？

Answer 1

检查下面，我已经粘贴了您的确切代码，它似乎工作正常，我所做的只是在您的 href 上添加 # 以便它保持在同一页面上。

var header = document.getElementById("navbar");
var btns = header.getElementsByClassName("topnavbar");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function() {
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}

 .active {
    text-decoration: none;
    color: #4da6ff;
    outline: none;
    background: #34495e;
 }

<div id="navbar" >
   <ul>
       <li> <a class="topnavbar active" href="#" id="home"title="Home">HOME </a> </li>
       <li> <a class="topnavbar"        href="#" id="movies" title="Movies">MOVIES </a> </li>
       <li> <a class="topnavbar"        href="#" id="theaters" title="Theaters">THEATERS </a></li>
       <li> <a class="topnavbar"        href="#" id="buytickets" title="Buy Tickets Online">BUY TICKETS ONLINE </a> </li>
       <li style="float:right"><a class="btn btn-scope1 navbar-btn" id="btn1" href="">TEST YOUR KNOWLEDGE </a> </li>	
    </ul>	
</div>