Active tab in nav bar

Question

I'm trying to create an active tab in my nav bar. I have used javascript for this. I have the javascript in my code. I can't find the reason why it isn't working

 var btnContainer = document.getElementById("active-link"); var btns = btnContainer.getElementsByClassName("button"); for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function() { var current = document.getElementsByClassName("active"); current[0].className = current[0].className.replace("active"); this.className += "active"; }) }

 .active-link { display: flex; list-style: none; position: relative; top: 10rem; left: 25%; margin: 100px -5px; }.button { text-decoration: none; padding-right: 100px; padding-left: 100px; padding-bottom: 10px; cursor: pointer; display: inline-block; border: none; background-color: transparent; color: rgb(0, 0, 0); border-bottom: 2px solid black; font-size: 1.5rem; transition: ease; }.button:hover { color: red; border-bottom: 5px solid red; padding-bottom: 7px; }

 <div class="active-link" id="active-link"> <li> <a class="button">him</a> </li> <li> <a class="button">her</a> </li> <li> <a class="button">xyz</a> </li> </div>

active links that are padded. Reference can be something like the active tabs in new balances website

Answer 1

@Vadar

I have added the new function for removing class from all current active tabs. It will be active one tab at a time.

Here is the solution:

 var btnContainer = document.getElementById("active-link"); var btns = btnContainer.getElementsByClassName("button"); function removeClass(elems, className) { [].forEach.call(document.querySelectorAll(elems), function(el) { el.classList.remove(className); }); } for (var i = 0; i < btns.length; i++) { btns[i].addEventListener('click', function(e) { removeClass('.button', 'active') this.classList.toggle('active'); }) }

 .active-link { display: flex; list-style: none; position: relative; top: 10rem; left: 25%; margin: 100px -5px; }.button { text-decoration: none; padding-right: 100px; padding-left: 100px; padding-bottom: 10px; cursor: pointer; display: inline-block; border: none; background-color: transparent; color: rgb(0, 0, 0); border-bottom: 2px solid black; font-size: 1.5rem; transition: ease; }.button:hover, .active { color: red; border-bottom: 5px solid red; padding-bottom: 7px; }

 <div class="active-link" id="active-link"> <li> <a class="button">him</a> </li> <li> <a class="button">her</a> </li> <li> <a class="button">xyz</a> </li> </div>

Answer 2

It is because nothing is active by default. Try adding an active element other wise the code:

 var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace("active");

Will give an error.

Also, do check your JS console to find the error and figure out on your own:)