Question

当用户单击<a>标签时，我试图更改标签的颜色。除用户第一次单击<a>标记外，JS正常运行。标签仅在第二次更改颜色。

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

我运行了您的脚本，并在控制台中获得了

Uncaught TypeError: Cannot read property 'id' of null

（在chrome dev工具中）您是否检查了元素视图（在控制台旁边）以查看javascript如何与HTML交互？

从查看代码的角度来看，数字“ 2”表示所选的ID，但是，所有内容均以数字2结尾，并且从不实际删除。那是故意的吗？

该循环似乎不喜欢“ this.id”，因为它丢失了引用（上面的错误）。

您是否发出警报以查看指针在循环中的位置？

Answer 2

我成功解决了该问题，这是我通过DOM路径提出的问题，不正确。第一次加载页面时，默认的加载是下一个JS代码的“目标” ID：

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

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

我将默认功能更改为：

   toggleNav('goals')

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

主动导航栏第一次不会更改

2 个答案: