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>

Answer 2

我设法修复了它。就像大家都说的那样，我所做的是正确的，但是问题是我尝试使用script标签的地方。我读过一篇文章，据说在<head>标签内使用script标签是正确的。但是由于某种原因，它似乎产生了负面影响。在body标签内重新使用后，它可以正常工作。对不起，我造成的麻烦。感谢您抽出宝贵时间来帮助我。

根据活动选项卡更改文本颜色

2 个答案: