Javascript颜色转换器只在第二次点击时改变颜色？

Question

所以我有一个导航栏，我正在尝试使它突出显示当前选项卡，但是我的 javascript 不起作用，它仅适用于第二次单击，并且仅适用于双击。

 function navColourChange(id){ var navBarLinks=document.getElementsByClassName("navLinks"); for(i=0;i<navBarLinks.length;i++){ navBarLinks[i].style.borderTop = "thick solid #ffffFF"; navBarLinks[i].style.color="#2F2933" console.log(i) } var link = navBarLinks[id] link.style.borderTop = "4px solid #01A2A6"; link.style.color="#01A2A6" }

 <div class="NavBar"> <ul> <li> <a href="index.html" id="navButton1" class="navLinks" onclick="navColourChange(0)">HOME</a> </li> <li> <a href="about.html" id="navButton3" class="navLinks" onclick="navColourChange(1)">ABOUT</a> </li> <li> <a href="Portfolio.html" id="navButton4" class="navLinks" onclick="navColourChange(2)">PORTFOLIO</a> </li> <li> <a href="Contact.html" id="navButton2" class="navLinks" onclick="navColourChange(3)">CONTACT</a> </li> </ul> </div>

下面有什么，它看起来像

Answer 1

如果您真正想要的是一种使用 JavaScript/jQuery 在导航栏中突出显示当前页面的方法，您可以执行以下操作：

$(function() {
   var currentPage = window.location.pathname.split('/').pop();
   $('.NavBar ul li a[href*="'+currentPage+'"]').css({
      borderTop: "4px solid #01A2A6",
      color: "#01A2A6"
   });
});

在这里，我们从 url 中找到文件名，然后将导航栏中的 a 元素样式化，该元素具有该文件名作为 href。