Question

我想使用香草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也可以有子页面？像/ blog /无论什么？

因此，无论将来遇到什么紧急情况，一个简单的解决方案都是反转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，如果匹配则中断将跳过循环的所有进一步执行。否则它将搜索/blog，并且只有前两个执行都不匹配时，它才会选择/，因为它将始终是URL的一部分。希望这可以帮助！

如果网址包含VALUE，请添加类以进行链接+ ROOT

2 个答案: