切换活动导航链接

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