Question

我试图通过在所有页面上将导航链接作为一个独立的文件包含进来，从而避免代码重复

但是我的问题是如何在导航链接上指示当前页面，我知道如何使用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");?>

Answer 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>

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

1 个答案: