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

时间:2019-02-17 10:52:11

标签: javascript css dom

我想使用香草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>也永久获得了分配的“活动”类。有没有一种方法可以避免这种情况,以便只有在访问主页时主页链接类才是“活动的”?

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:0)

首先,欢迎堆栈溢出!答案在某种程度上取决于您对网站的未来概念,以及导航中是否存在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的一部分。希望这可以帮助!