切換活動導航鏈接

Question

我在使用 JavaScript 切換活動導航鏈接時遇到問題。 我認為我的 CSS 引起了一些問題，但我不知道為什么。

如果有幫助的話，我在底部有 CSS 代碼。 我已經在我的 HTML 頭中正確鏈接了 Jquery 和我自己的name.js文檔。 我想在訪問時切換活動鏈接。

 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

我簡化了您的代碼並為每個導航創建了特定的活動類。 您可以給父級單擊處理程序並通過e.target引用子級，因為在這種情況下，子級占用了父級的全部空間。

 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

對於前兩個.nav-item我看到它們指的是不同的文件。 因此，在它們相應的文件中，您可以將它們標記為active 。

對於您可以使用的三個.nav-item中的 rest（我使用的是 JQuery，因為您提到了它）

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

確保正確應用 .active 的.active 。

Answer 3

你可以做這樣的事情； 在其中刪除每個項目的活動 class ，然后將其添加到單擊的項目中。

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")
  })
})