如果 URL 包含 VALUE 添加类到链接 + ROOT

Question

我想根据使用 vanilla JS 的 url 添加到我的导航的活动链接。

我的导航是这样的：

 <div id="navi">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/blog">Blog</a></li>
    <li><a href="/contact">Contact</a></li>
 </ul>
</div>

JS 看起来像这样：

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.indexOf(link[i].href) != -1) {
     link[i].className='active';}
 }}
window.onload = Activelink;

效果很好，特别是因为即使访问了博客文章，它也会向博客链接添加“活动”类。 唯一的问题是<a href="/">Home</a>永久获得了分配的“活动”类。 有没有办法避免这种情况，以便主页链接类只有在访问主页时才“活动”？

Answer 1

您可以使用endsWith而不是indexOf ：

function Activelink() {
 link = document.getElementById('navi').getElementsByTagName('a');
 for(i=0; i<link.length; i++) {
    if(document.location.href.endsWith(link[i].href)) {
     link[i].className='active';}
 }}
window.onload = Activelink;

Answer 2

首先，欢迎堆栈溢出！ 答案在一定程度上取决于您对网站的未来概念，以及您是否将拥有不在导航中的 URL。 例如，如果您在页脚中链接的 /copyright 处有某种版权页面可访问，但在导航中没有，那么应该突出显示什么？ 主页条目？ 禁止入内？ 此外，我假设 /blog 和 /contact 也可以有子页面？ 喜欢/博客/什么？

因此，不管未来的极端情况如何，一个简单的解决方案是反转 for 循环并在 if 子句中添加一个中断：（注意我将 /blog 更改为 /js，因为这是此测试片段的 URL 的一部分跑进来。）

 function activeLink() { link = document.getElementById('navi').getElementsByTagName('a'); for(i = link.length - 1; i >= 0; i--) { if(document.location.href.indexOf(link[i].href) != -1) { link[i].className='active'; break; } }} window.onload = activeLink;

 a.active{ background-color:red; }

 <div id="navi"> <ul> <li><a href="/">Home</a></li> <li><a href="/js">Blog</a></li> <li><a href="/contact">Contact</a></li> </ul> </div>

现在您的 for 循环检查window.location.href包含/contact ，然后如果它匹配 break 将跳过循环的所有进一步执行。 否则它将搜索/blog并且只有在前两次执行中没有一个匹配时才会选择/ ，因为它始终是 URL 的一部分。 希望这可以帮助！