无缝切换导航按钮颜色：防止刷新时发生跳转

前端

2024-01-22 15:43:30

告别导航栏按钮颜色混乱：通过 JavaScript 解决导航不一致

在用户体验中，网站导航栏的作用至关重要。当导航栏按钮的颜色与当前所处页面不一致时，会给用户带来混乱和挫败感。幸运的是，我们可以利用 JavaScript 来轻松解决这个问题。

JavaScript 的妙用

通过使用 JavaScript，我们可以追踪当前页面的 URL。当用户点击导航栏按钮时，我们可以将按钮的颜色设置为与当前页面 URL 相匹配。即使在刷新页面后，JavaScript 也会再次检查 URL 并相应地调整按钮颜色。

实现步骤

要实现这个解决方案，只需几个简单的步骤：

为每个导航栏按钮添加唯一 ID。
在 CSS 中为每个按钮定义不同的颜色。
添加一个 JavaScript 事件监听器来监听导航栏按钮的点击事件。
在事件监听器中，使用 JavaScript 将按钮颜色设置为与当前页面 URL 相匹配。
添加一个 JavaScript 事件监听器来监听页面的刷新事件。
在刷新事件监听器中，再次检查当前页面的 URL 并相应地设置按钮颜色。

代码示例

以下代码示例展示了如何使用 JavaScript 来解决导航栏按钮颜色不一致的问题：

<ul id="navigation">
  <li><a href="page1.html" id="btn1">Page 1</a></li>
  <li><a href="page2.html" id="btn2">Page 2</a></li>
  <li><a href="page3.html" id="btn3">Page 3</a></li>
</ul>

<script>
document.getElementById("navigation").addEventListener("click", function(event) {
  var buttonId = event.target.id;
  document.getElementById(buttonId).style.color = "#ff0000";
});

window.addEventListener("load", function() {
  var currentPageUrl = window.location.href;
  var buttons = document.querySelectorAll("#navigation a");
  for (var i = 0; i < buttons.length; i++) {
    if (buttons[i].href === currentPageUrl) {
      buttons[i].style.color = "#ff0000";
      break;
    }
  }
});
</script>