Активная навигационная панель не меняется с первого раза - PullRequest
Новая
       7

Активная навигационная панель не меняется с первого раза

0 голосов
/ 09 сентября 2018

Я пытаюсь изменить цвет тега навигации, когда пользователь нажимает на тег <a>. JS работает нормально, за исключением первого раза, когда пользователь нажимает на тег <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>

Ответы [ 2 ]

0 голосов
/ 23 сентября 2018

Мне удалось решить проблему, это была проблема, которую я сделал по пути DOM не правильно. При первой загрузке страницы загрузкой по умолчанию был идентификатор «цели» по следующему коду JS: 

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

По этой причине «addEventListener» необходимо было загружать в первый раз и только во второй раз, когда функция может работать.

Я изменил функцию по умолчанию на: 

   toggleNav('goals')

Я надеюсь, что помог, если у кого-то возникнет та же проблема. Спасибо за помощь.

0 голосов
/ 09 сентября 2018

Я запустил ваш скрипт и в консоли получил 

Uncaught TypeError: Cannot read property 'id' of null

(в инструментах chrome dev) Вы проверили представление элемента (рядом с консолью), чтобы увидеть, как JavaScript взаимодействует с HTML?

при просмотре кода число «2» предназначено для выбранных идентификаторов, однако все заканчивается номером 2 и фактически никогда не удаляется. Это намеренно?

Кажется, что циклу не нравится "this.id", так как он теряет ссылку (ошибка выше).

вставили ли вы оповещения, чтобы увидеть, где находится указатель в цикле?

...