Adding active class to current element

Question

I'm looking to add an active element class to my current navbar, but currently struggling.

I've tried the w3schools method, but maybe i've implemented it incorrectly.

CODE:

 // Get the container element var btnContainer = document.getElementsByClassName("tab"); // Get all buttons with class="btn" inside the container var btns = btnContainer.getElementsByClassName("link"); // Loop through the buttons and add the active class to the current/clicked 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"; }); } 

 #navbar { position: absolute; text-align: right; top: 3.5em; right: 3.5em; z-index: 2; } .tab { background-color: white; opacity: 0.3; height: 3.5em; width: 0.2em; margin-bottom: 1em; } .tab:hover{ opacity:1; transition:0.7s ease; } .link:hover > .text { opacity:1; transition:0.7s ease; } .active, .tab:hover { opacity:1; transition:0.7s ease; } .active, .text:hover > .text { opacity:1; transition:0.7s ease; } 

 <div id="navbar"> <div class="tab"> <a class="link active" href="#home"> <div class="text">Home</div> </a></div> <div class="tab"> <a class="link" href="#work"> <div class="text">Work</div> </a></div> <div class="tab"> <a class="link" href="#about"> <div class="text">About</div> </a></div> </div> 

The nav bar is currently working but theres no active element. I'd like the tab to be opacity: 1 when active.

Answer 1

First off, you need to add the class to the parent div, not the link, since it is the parent who has the opacity set to 0.3. Now, I did it in jQuery since it is much easier to achieve. Hope it is not a problem.

 $('.link').on('click', function() { $('.link').parent().removeClass('active'); $(this).parent().addClass('active'); }); 

 #navbar { position: absolute; text-align: right; top: 3.5em; right: 3.5em; z-index: 2; } .tab { background-color: white; opacity: 0.3; height: 3.5em; width: 0.2em; margin-bottom: 1em; } .tab:hover{ opacity:1; transition:0.7s ease; } .link:hover > .text { opacity:1; transition:0.7s ease; } .active, .tab:hover { opacity:1; transition:0.7s ease; } .active, .text:hover > .text { opacity:1; transition:0.7s ease; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="navbar"> <div class="tab active"> <a class="link" href="#home"> <div class="text">Home</div> </a></div> <div class="tab"> <a class="link" href="#work"> <div class="text">Work</div> </a></div> <div class="tab"> <a class="link" href="#about"> <div class="text">About</div> </a></div> </div> 

Answer 2

See a quick jQuery solution below using the following methods:

• .on()
• .closest()
• .addClass() and
• .removeClass()

 $(function() { var links = $('.tab > .link'); links.on('click', function() { links.removeClass('active').closest('.tab').removeClass('active'); $(this).addClass('active').closest('.tab').addClass('active'); }) .first().click(); }); 

 #navbar { position: absolute; text-align: right; top: 3.5em; right: 3.5em; z-index: 2; } .tab { background-color: white; opacity: 0.3; height: 3.5em; width: 0.2em; margin-bottom: 1em; } .tab:hover{ opacity:1; transition:0.7s ease; } .link:hover > .text { opacity:1; transition:0.7s ease; } .active, .tab:hover { opacity:1; transition:0.7s ease; } .active, .text:hover > .text { opacity:1; transition:0.7s ease; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="navbar"> <div class="tab"> <a class="link active" href="#home"> <div class="text">Home</div> </a></div> <div class="tab"> <a class="link" href="#work"> <div class="text">Work</div> </a></div> <div class="tab"> <a class="link" href="#about"> <div class="text">About</div> </a></div> </div> 

Answer 3

In Javascript you can use .querySelectorAll() :

 document.querySelectorAll('.tab .link').forEach(function(ele, idx) { ele.addEventListener("click", function(e) { e.preventDefault(); document.querySelectorAll('.tab.active').forEach(ele => ele.classList.remove('active')); ele.parentNode.classList.toggle('active'); }); }); 

 #navbar { position: absolute; text-align: right; top: 3.5em; right: 3.5em; z-index: 2; } .tab { background-color: white; opacity: 0.3; height: 3.5em; width: 0.2em; margin-bottom: 1em; } .tab:hover{ opacity:1; transition:0.7s ease; } .link:hover > .text { opacity:1; transition:0.7s ease; } .active, .tab:hover { opacity:1; transition:0.7s ease; } .active, .text:hover > .text { opacity:1; transition:0.7s ease; } 

 <div id="navbar"> <div class="tab"> <a class="link active" href="#home"> <div class="text">Home</div> </a></div> <div class="tab"> <a class="link" href="#work"> <div class="text">Work</div> </a></div> <div class="tab"> <a class="link" href="#about"> <div class="text">About</div> </a></div> </div>