Toggle active nav-link

Question

I have a problem with toggling the active nav-link using JavaScript. I think my CSS is causing some problems but I do not know why.

I have the CSS code down at the bottom if that is any help. I have linked Jquery and my own name.js document correctly in my HTML head. I want to toggle the active link when it is visited.

 var header = document.getElementById("nav-bar") var toggled_nav = document.getElementsByClassName("nav-item") for (var i = 0; i < toggled_nav.length; i++) { toggled_nav[i].addEventListener("click", function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace(" active", ""); this.className += " active"; }); }

 #nav-bar { margin: 27px auto 0; position: relative; width: 610px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } #nav-bar a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } #nav-bar.animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all.5s ease 0s; border-radius: 8px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 180px; } a:nth-child(4) { width: 110px; } a:nth-child(5) { width: 110px; } nav.start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } nav.start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #fcf75e; } nav.start-blog, a:nth-child(3):hover~.animation { width: 180px; left: 210px; background-color: #3498db; } nav.start-portefolio, a:nth-child(4):hover~.animation { width: 90px; left: 400px; background-color: #9b59b6; } nav.start-contact, a:nth-child(5):hover~.animation { width: 110px; left: 500px; background-color: #e67e22; }

 <nav id="nav-bar"> <a class="nav-item" href="#">HOME</a> <a class="nav-item" href="#">POKEMON</a> <a class="nav-item" href="#">LEAUGE OF LEGENDS</a> <a class="nav-item" href="#">API-DOC</a> <a class="nav-item" href="#">ABOUT US</a> <div class="animation start-home"></div> </nav>

Answer 1

I simplified your code and created specific active classes for each nav. You can give the parent the click handler and refer to the children through e.target since in this case the children take up the full space of the parent.

 var header = document.getElementById("nav-bar") header.addEventListener("click",function(e){ has_class = header.querySelector(".active"); if(has_class)has_class.classList.remove("active"); e.target.classList.add("active"); });

 #nav-bar { margin: 27px auto 0; position: relative; width: 610px; height: 50px; background-color: #34495e; border-radius: 8px; font-size: 0; } #nav-bar a { line-height: 50px; height: 100%; font-size: 15px; display: inline-block; position: relative; z-index: 1; text-decoration: none; text-transform: uppercase; text-align: center; color: white; cursor: pointer; } #nav-bar.animation { position: absolute; height: 100%; top: 0; z-index: 0; transition: all.5s ease 0s; border-radius: 8px; }.active{ border-radius: 8px; } a:nth-child(1) { width: 100px; } a:nth-child(2) { width: 110px; } a:nth-child(3) { width: 180px; } a:nth-child(4) { width: 110px; } a:nth-child(5) { width: 110px; } a:nth-child(1).active{ background:#1abc9c; } nav.start-home, a:nth-child(1):hover~.animation { width: 100px; left: 0; background-color: #1abc9c; } a:nth-child(2).active{ background:#fcf75e; } nav.start-about, a:nth-child(2):hover~.animation { width: 110px; left: 100px; background-color: #fcf75e; } a:nth-child(3).active{ background:#3498db; } nav.start-blog, a:nth-child(3):hover~.animation { width: 180px; left: 210px; background-color: #3498db; } a:nth-child(4).active{ background:#9b59b6; } nav.start-portefolio, a:nth-child(4):hover~.animation { width: 90px; left: 400px; background-color: #9b59b6; } a:nth-child(5).active{ background:#e67e22; } nav.start-contact, a:nth-child(5):hover~.animation { width: 110px; left: 500px; background-color: #e67e22; }

 <nav id="nav-bar"> <a class="nav-item" href="#">HOME</a> <a class="nav-item" href="#">POKEMON</a> <a class="nav-item" href="#">LEAUGE OF LEGENDS</a> <a class="nav-item" href="#">API-DOC</a> <a class="nav-item" href="#">ABOUT US</a> <div class="animation start-home"></div> </nav>

Answer 2

For the first two .nav-item I see they are referring to different files. So in their curresponding files, you can mark them active .

For rest of the three .nav-item you can use (I am using JQuery since you mentioned it)

$('#nav-bar').on('click', '.nav-item', function(e) {
    $('.nav-item.active', e.currentTarget).removeClass('active');
    $(this).addClass('active');
}

make sure the css for the .active is being applied correctly.

Answer 3

You could do something like this; where you remove the active class for each item and then add it to the one that was clicked.

let items = document.querySelectorAll(".nav-item")
items.forEach(item => {
  item.addEventListener("click", event => {
    const current = document.querySelector('.active')
    current.classList.remove('active')
    item.classList.add("active")
  })
})