クリックイベントを使用して個々のループアイテムにクラスを追加および削除する

Question

クリックするたびにナビゲーションクラスのメニューアイテムにCSSクラスを追加したいと思うので、 ）。私は、.menu-itemクラスをループし、ループを使って新しいCSSクラスを追加/削除する必要があることを知っていますが、ボールを再生することはできません。

私は、thisItem変数がtrueまたはfalseに設定されているかどうかに依存して、.menu-itemをthisオブジェクトにして、ブール値を使用してCSSクラスを追加または削除する必要があると思います。

私はこれを再生することはできないようですが、私は正しい方法でイベントリスナーを使用していると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

はあなたの問題のためにcodepen変更されます。https://codepen.io/anon/pen/RjJEWe?editors=1010 コードは単にクリックされたアンカーにcurrent-itemクラスを追加するので、CSSでスタイルを設定することができます。コード内にevent.preventDefault()が表示され、アンカーがリンクをたどらないようにすることができます。ページをリロードしてjsが何もしないためです。これは、使用しているスタックによって異なります。サーバーバックアップWebサイトがある場合、現在のリンクはサーバーによって処理され、返された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'); 
    }); 
});