javascript - 事件导航栏不会在第一次更改

Question

我试图在用户点击 <a> 时更改导航标签颜色标签。 JS 工作正常，除了用户第一次点击 <a>。标签;仅在第二次 a 标签颜色发生变化。

JavaScript:

   function toggleNav(pageId){
     activeColor();
     var href = 'html/' + pageId + '.html';
     window.onload = document.getElementById('main').innerHTML = 
   loadPage(href);

  }

  function activeColor(){
var header = document.getElementById("allNav");
var btns = header.getElementsByClassName("notActive");

for (var i = 0; i < btns.length; i++) {
      var button1 = btns[i]; 
        button1.addEventListener("click" , 
            function() {
                var current = document.getElementsByClassName(" active");
                console.log(current.length);
                for (var i = 0; i <  current.length + 1; i++) { 
                  current[0].className = current[0].className.replace(" 
        active", "");
                }

                var myString = this.id;
                var stringLength = myString.length; 
                var lastChar = myString.charAt(stringLength - 1);

                if(lastChar == "2"){
                    var add = document.getElementById(this.id);
                    var id2Nmae = add.id.slice(0, -1);
                    var add2 = document.getElementById(id2Nmae);
                    add.className += " active";
                    add2.className += " active";
                }
                else{
                    var add = document.getElementById(this.id);
                    var id2Nmae = add.id + "2";
                    var add2 = document.getElementById(id2Nmae);
                    add.className += " active";
                    add2.className += " active";
                }

              });
            }
      }

HTML :

        <div id="allNav">
    <div class="sidebar" id="mySidebar" style="display:block">
          <button id="open" onclick="Toggle()">
            <a ><i class="fas fa-bars"></i></a>
          </button>
          <a href="#" onclick="toggleNav('goals')" class="notActive active" id="nav12"><i class="glyphicon glyphicon-screenshot"></i></a>
          <a href="#"onclick="toggleNav('Restrictions')" class="notActive" id="nav32"><i class="glyphicon glyphicon-exclamation-sign"></i></a>
          <a href="#" onclick="toggleNav('Workout')" class="notActive" id="nav42"><i class="fas fa-burn"></i></a>
          <a href="#" onclick="toggleNav('Food')" class="notActive" id="nav52"><i class="fas fa-utensils"></i></a>
          <a href="#" onclick="toggleNav('Progress')" class="notActive" id="nav62"><i class="fa fa-line-chart"></i></a>
          <a href="#" onclick="toggleNav('Message')" class="notActive" id="nav72"><i class="far fa-comments"></i></a>
          <a href="#" onclick="toggleNav('Notification')" class="notActive" id="nav82"><i class="fas fa-bell"></i></a>
    </div>

Answer 1

问题我成功解决了，是我做的DOM路径不对的问题。在页面第一次加载时，默认加载下一个 JS 代码的“目标”id:

var href = 'html/goals.html';
 window.onload = document.getElementById('main').innerHTML = loadPage(href);

这就是为什么“addEventListener”需要在第一次加载并且只有在第二次函数才能运行的原因。

我将默认函数更改为:

   toggleNav('goals')

如果有人遇到同样的问题，我希望我能提供帮助。谢谢您的帮助。