向當前元素添加活動類

Question

我正在向當前的導航欄添加一個活動的元素類，但是目前很掙扎。

我嘗試了w3schools方法，但也許我沒有正確實現它。

碼：

 // 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> 

導航欄當前正在工作，但是沒有活動元素。 我希望標簽頁不透明：1處於活動狀態。

Answer 1

首先，您需要將類添加到父div，而不是鏈接，因為將父級的不透明度設置為0.3。 現在，我在jQuery完成了它，因為它更容易實現。 希望這不是問題。

 $('.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

使用以下方法查看下面的快速jQuery解決方案：

• 。上（）
• .closest（）
• .addClass（）和
• .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

在Javascript中，您可以使用.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>