如何更改导航栏当前页面的颜色答案

【问题标题】：How to change color of current page of navigation bar如何更改导航栏当前页面的颜色
【发布时间】：2019-11-13 10:42:23
【问题描述】：

我能够让导航栏更改悬停、活动和当前的颜色。问题是当页面加载时它会刷新导航栏并且当前页面颜色会恢复。我相信 javascript 正在按预期工作。

我找到了一种方法，其中每个网页都有自己的导航栏，这不是最好的编码方法，只有在网站只有几个页面时才会使用。

/* 
 * https://www.w3schools.com/howto/howto_js_active_element.asp
 */

// Get the container element
var btnContainer = document.getElementById("navbar");

// Get all buttons with class="btn" inside the container
var btns = btnContainer.getElementsByClassName("btn");

// 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("current");

    // If there's no current class
    if (current.length > 0) {
      current[0].className = current[0].className.replace(" current", "");
    }

    // Add the current class to the current/clicked button
    this.className += " current";
  });
}

/* Change background color of navbar links on hover */

.btn:hover {
  background-color: #FFFF00;
  /* Yellow */
  color: #000000;
  /* Black */
}


/* Change background color of navbar links on active */

.btn:active {
  background-color: #FF0000;
  /* Red */
  color: #000000;
  /* Black */
}


/* Change background color of navbar links for current page */

.btn.current {
  background-color: #006600;
  /* Green */
  color: #FFFFFF;
  /* White */
}

<nav>
  ...
  <div id="navbar" class="navbar">
    <div class="dropdown">
      <button class="dropbtn"><a class="btn" href="index.php">Home</a>
                    <i class="fa fa-caret-down"></i>
                </button>
    </div>
    <div class="dropdown">
      <button class="dropbtn"><a class="btn" href="PlanYourVisit.php">New Here</a>
                    <i class="fa fa-caret-down"></i>
                </button>
      <div class="dropdownContent">
        <a class="btn" href="PlanYourVisit.php">Plan Your Visit</a>
        <a class="btn" href="YourKids.php">Your Kids</a>
        <a class="btn" href="TimeLocation.php">Time and Location</a>
      </div>
    </div>
    ...
  </div>
  </div>
</nav>

我希望导航栏保持当前页面的颜色为绿色。导航变为绿色，然后恢复为导航栏的默认灰色。

【问题讨论】：

你有理由使用 JS 吗？由于该站点已经是 PHP（我假设），因此您可以参考此答案以将按钮的 URL 与实际 URL 进行比较，并基于此输出一个类。 stackoverflow.com/questions/7118823/…

标签： javascript php html css

【解决方案1】：

关键是在页面加载而不是点击时执行此操作。

只需循环浏览您的导航并查看 HREF 是否与当前 URL 匹配。

<script>
    let current_url = document.location;
    document.querySelectorAll(".navbar .btn").forEach(function(e){
       if(e.href == current_url){
          e.classList += " current";
       }
    });
</script>

【讨论】：

我尝试了这个，但我错过了一些东西。我删除了我的 javascript 文件，添加了：
我在 index.php 文件中添加了这一行： $current_url = "test.websitenamet.org/index.php";

@JohnFischer 这都是 javascript，不需要 PHP 变量。我更新了我的答案以减少混乱。

我在新的 javascript 代码中做错的部分是我将 PHP 变量与 javascript 变量混合在一起。我把 current_url = "test.websitename.org/index.php";在 index.php 文件中，现在它可以工作了。每个 php 文件都需要它自己的 current_url 定义。

@JohnFischer，不，如果您按原样使用代码而不修改它，它将适用于每个页面。我的代码中的 `document.location' 获取当前 URL。

感谢 iamvain2，你是对的。出于某种原因，我把它弄得太复杂了。我需要做的就是用你的 javascript 替换我的 javascript。