Используйте событие Click, чтобы добавить и удалить класс для отдельных элементов цикла

Question

Я хочу добавлять CSS-класс в элемент меню навигации каждый раз, когда он щелкает (поэтому я могу затем стилизовать этот элемент меню, чтобы люди знали, что это страница, на которой они находятся). Я знаю, что мне нужно пройтись по классу.menu-item и добавить / удалить новый класс CSS с помощью цикла, но я не могу заставить его играть в мяч.

Я предполагаю, что мне нужно сделать.menu-item объектом this и использовать логическое значение для добавления или удаления класса CSS, в зависимости от того, установлена ​​ли переменная currentItem в значение true или false.

Кажется, я не могу заставить это играть, и я не уверен на 100%, правильно ли я использую прослушиватель событий.

Любая помощь будет потрясающей.

codepen: https://codepen.io/emilychews/pen/eeKPoo?editors=1010

JS

var navlinks = document.getElementsByClassName('menu-item')
var currentItem = false;

 for (i = 0; i<navlinks.length; i+=1) {

    function addCurrentItemToMenu() {

    if (currentItem === false) {

        navlinks = this

        this.classList.add('current-item')
        currentItem = true

        } else {

            this.classList.remove('current-item')
            currentItem = false

        }
    }
}

navlinks.addEventListener("click", function(){
    addCurrentItemToMenu() 
}, false)

CSS

body, ul {padding: 0; margin: 0}

#main-header {width: 100%; height: 100px;}

#mobile-menu-button {display: none;}

#main-navigation {
  position: relative;
  width: 100%;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 5% 10px 5%;
  align-items: center;
}

ul#nav-menu-items {
  display: flex;
  margin-left: auto;
}

#main-navigation ul li {list-style-type: none;}

ul#nav-menu-items li a {
  padding: 10px 15px;
  margin: 0 5px;
  box-sizing: border-box;
  background: yellow;
  text-decoration: none;
  color:#000;
}

#main-navigation ul#nav-menu-items li a:hover {
  color:blue;
  transition: color .25s;
}

HTML

<header id="main-header">
  <nav id="main-navigation"> 
    <ul id="nav-menu-items">
      <li class="menu-item"><a href="https://www.google.com">News</a></li>
      <li class="menu-item"><a href="https://www.google.com">About</a></li>
      <li class="menu-item"><a href="https://www.google.com">Contact</a></li>
    </ul>  
  </nav>
</header>

Answer 1

Вот измененный код для вашей проблемы: https://codepen.io/anon/pen/RjJEWe?editors=1010 Код просто добавьте current-item Класс для привязанного якоря, так что вы можете стилизовать его так, как вы хотите в CSS. Вы также можете увидеть event.preventDefault() в коде, чтобы якорь не следовал по вашей ссылке, так как он перезагрузит страницу, а js ничего не сделает. Это зависит от стека, который вы используете. Если у вас есть веб-сайт, поддерживаемый сервером, текущая ссылка будет обрабатываться сервером, а для возвращенного html класса уже будет установлен соответствующий класс. Если у вас есть инфраструктура внешнего интерфейса js (Angular, VueJS, ReactJS), вы должны обработать ее соответствующим образом.

Просто для вашего примера вы можете увидеть код ниже:

var navlinks = document.querySelectorAll('li.menu-item > a');

// Loop through all the links and add event listener
navlinks.forEach(function(item) {
  item.addEventListener('click', function(event) {
    event.preventDefault();
    // Remove the class from all elements
    navlinks.forEach(function(item) {
      item.classList.remove('current-item');
    })
    // add the class to the current one
    this.classList.add('current-item');
  });
});