向当前元素添加活动类

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>