在包含的 Nav.php 文件中指示当前页面答案

【问题标题】：Indicate current page on included Nav.php file在包含的 Nav.php 文件中指示当前页面
【发布时间】：2018-08-26 17:17:06
【问题描述】：

我试图通过将我的导航链接作为一个单独的文件包含在所有页面中来避免代码重复，这很好用

但我的问题是如何在导航链接上指示当前页面我知道如何使用 JavaScript 动态添加类但我不知道如何搜索 DOM 并找到当前页面链接并添加类或风格。

我的导航链接示例是：

 <nav>
  <ul>
   <li><a href="home.php" alt="Home">Home</a></li>
   <li><a href="about.php" alt="About">About</a></li>
   <li><a href="contact.php" alt="Contact">Cont.</a></li>
  </ul>
 </nav>

我把它包括在内：

  <?php include("./nav.php");?>

【问题讨论】：

您可以执行javascript 函数来读取当前的URL，并使用它来定位href 与来自URL 的匹配结果来设置class。由于您还没有尝试自己实现这一点，我只会发表评论而不为您编写源代码。
我理解你的提示，但是请我使用什么 js 函数来获取 URL 我可以使用 querySelectorAll('nav ul li a'); 获取
herf 然后使用循环遍历它们

【解决方案1】：

看看下面的例子。请注意，您有herf，应该是href。 a 标签没有alt 属性，而是使用title。此外，该示例使用 es6 函数，因此您需要 babel 之类的东西才能使其与 IE 一起使用。

let currentUrl = window.location.href;
const urls = Array.from( document.querySelectorAll('nav a') );

urls.forEach( url => {  
  if( url.getAttribute('href') === currentUrl ) {
    url.classList.add('active')
  }
});

a {
  color: red;
}

.active {
  color: blue;
}

<nav>
  <ul>
   <li><a href="home.php" title="Home">Home</a></li>
   <li><a href="https://stacksnippets.net/js" title="About">About</a></li>
   <li><a href="contact.php" title="Contact">Cont.</a></li>
  </ul>
 </nav>

【讨论】：

谢谢你在构建 JavaScript 时总是很迷茫，很难习惯来自 c#，感谢我总是拼错的 href
当然没问题。使用 es6 更容易构建 JS。如果您想研究 JS 类，TypesScript 也可能会有所帮助
不用担心 es6 语法，我可以将其分解为基本的 js，我只需要结构以及如何在不获取所有不必要部分的情况下获取 url。你给我看的谢谢你:)