Javascript 基于URL添加活动导航类

我试图根据页面加载后所处的页面，将一个

active

类（即

class=“active”

）添加到相应的菜单列表项中。下面是我现在的菜单。在这方面，我已经尝试了我能找到的每一段代码，但没有任何效果。那么，有人能简单地解释一下在哪里以及如何添加javascript来定义这个任务吗

<ul id="nav">
    <li id="navhome"><a href="home.aspx">Home</a></li>
    <li id="navmanage"><a href="manageIS.aspx">Manage</a></li>
    <li id="navdocso"><a href="docs.aspx">Documents</a></li>
    <li id="navadmin"><a href="admin.aspx">Admin Panel</a></li>
    <li id="navpast"><a href="past.aspx">View Past</a></li>
</ul>

---

这不起作用的原因是javascript正在执行，然后页面正在重新加载，这会使“active”类无效。您可能想做的是：

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

在某些情况下，这是行不通的（多个类似指向的链接），但我认为这可能对您有用。

jQuery（函数（$）{
var path=window.location.href；//因为DOM元素的'href'属性是绝对路径
$（'ul a'）。每个（函数（）{
如果（this.href==路径）{
$（this.addClass（'active'）；
}
});
});
.active，a.active{
颜色：红色；
}
a{
颜色：#337ab7；
文字装饰：无；
}
李{
列表样式：无；
}
将活动导航类添加到菜单项




ES6版本，在链接到“/products”且有子例程（如“/products/new”、“/products/edit”等）的情况下正常工作

罗布，我说对了

我只是想发布我的解决方案，因为他的解决方案对我来说并不奏效。与他相比，我有一点变化。假设每个链接有不同的路径

(function() {
    var current = location.pathname;
    $('#navbar ul li a').each(function() {
        var $this = $(this); 

        // we check comparison between current page and attribute redirection.
        if ($this.attr('href') === current) {
            $this.addClass('active');
        }
    });
})();

这对我来说非常有效

$(function($) {
 let url = window.location.href;
  $('nav ul li a').each(function() {
   if (this.href === url) {
   $(this).addClass('active');
  }
 });
});

如果菜单需要在
li
中添加
active
类，则需要使用上面的代码

$(function($) {
  let url = window.location.href;
  $('nav ul li a').each(function() {
    if (this.href === url) {
      $(this).closest('li').addClass('active');
    }
  });
});

这在页面JS代码是一个100%的工作把你的id，并享受它

   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   <script>
   $(document).ready(function() {

            var CurrentUrl= document.URL;
            var CurrentUrlEnd = CurrentUrl.split('/').filter(Boolean).pop();
            console.log(CurrentUrlEnd);
            $( "#lu-ID li a" ).each(function() {
                  var ThisUrl = $(this).attr('href');
                  var ThisUrlEnd = ThisUrl.split('/').filter(Boolean).pop();

                  if(ThisUrlEnd == CurrentUrlEnd){
                  $(this).closest('li').addClass('active')
                  }
            });

   });


$（文档）.ready（函数（）{
var CurrentUrl=document.URL；
var CurrentUrlEnd=CurrentUrl.split（'/'）.filter（Boolean.pop（）；
console.log（CurrentUrlEnd）；
$（“#lu ID li a”）。每个（函数（）{
var ThisUrl=$（this.attr（'href'）；
var ThisUrlEnd=ThisUrl.split（'/'）.filter（Boolean.pop（）；
如果（ThisUrlEnd==CurrentUrlEnd）{
$（this）.closest（'li'）.addClass（'active'））
}
});
});

这应该是你的工作：
document.querySelector（
a[href^='${location.pathname.split（'/'[1]）}]
）。className='active'
以上解决方案都不适合我。最后，这个javascript解决方案成功了

<script>
function setActive() {
  linkObj = document.getElementById('premier-topnav').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    if(document.location.href.indexOf(linkObj[i].href)>=0) {
      linkObj[i].classList.add("active");
    }
  }
}

window.onload = setActive;
</script>    

我知道有人问这个问题已经很久了。以下是不使用jQuery的答案：

var activeNavlink = document.querySelectorAll('nav a[href^="/' + location.pathname.split("/")[1] + '"]');
activeNavlink[0].classList.add('active');

希望这有帮助。
使用普通JavaScript

(function () {
    var current = location.pathname.split('/')[1];
    if (current === "") return;
    var menuItems = document.querySelectorAll('.menu-item a');
    for (var i = 0, len = menuItems.length; i < len; i++) {
        if (menuItems[i].getAttribute("href").indexOf(current) !== -1) {
            menuItems[i].className += "is-active";
        }
    }
})();

（函数（）{
var current=location.pathname.split（'/'）[1]；
如果（当前==“”）返回；
var menuItems=document.querySelectorAll（'.menu项a'）；
for（变量i=0，len=menuItems.length；i
如果页面也有任何查询字符串参数，则下面的jquery脚本将与manu匹配。此脚本对于具有几乎相同名称的链接很有帮助

<script>
        //select current menu Item
        $(function () {
            var current = location.pathname.toLocaleLowerCase();
            $('.sidebar li a').each(function () {
                var $this = $(this);
                var href = $this.attr('href');
                href = href.replace(/\?.*/, "").toLocaleLowerCase();
                // if the current path is equal to this link, make it active
                if (href === current) {
                    $this.addClass('active');
                }
            })
        })
    </script>


//选择当前菜单项
$（函数（）{
var current=location.pathname.toLocaleLowerCase（）；
$（'.sidebar li a'）。每个（函数（）{
var$this=$（this）；
var href=$this.attr（'href'）；
href=href.replace（/\？*/，“”）。toLocaleLowerCase（）；
//如果当前路径等于此链接，请将其激活
如果（href==当前）{
$this.addClass（'active'）；
}
})
})
如果您想在asp.net中创建母版页，只需将此代码放在body标记中即可

 <script type="text/javascript">
    jQuery(function ($) {
        var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
        $('ul a').each(function () {
            if (this.href === path) {
                $(this).addClass('active');
            }
        });
    });
</script>


jQuery（函数（$）{
var path=window.location.href；//因为DOM元素的'href'属性是绝对路径
$（'ul a'）。每个（函数（）{
如果（this.href==路径）{
$（this.addClass（'active'）；
}
});
});

谢谢
可访问版本：

这是一个容易理解的版本，灵感来自rob

我不想在主页上运行这个脚本，所以我检查它是否是主页
我检查链接是否与确切的页面匹配，而不是检查它是否包含在路径中。否则，您将在查询中获得多个项
JS

function activateCurrentPage(menuItems){
    var current = location.pathname;
    if (current !== "/") {
    menuItems.each(function(){
        var $this = $(this);
        if($this.attr('href') === current){
            $this.addClass('active');
            $this.attr('aria-current', 'page');
        }
    });
    };  
}

activateCurrentPage( $('#nav li a') );  

CSS

然后，对于CSS，不要以活动类为目标，而是以aria属性为目标

#nav a[aria-current="page"]{
   color:red;
}

看到了一些简单的Javascript
把它放在我的Wordpress站点标题后的
标签中


（函数（）{
const currentLocation=location.href；
console.log（当前位置）；
const menuItem=document.getElementsByClassName（'nav-item'）；
const menulelength=menuItem.length
对于（i=0；i
在使用Networker的示例时，如果选择了任何页面，则指向根目录的链接都会亮起，这是我遇到的问题。这将防止根pae：

function setActive() {
  linkObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    const url = new URL(window.location.href);
    if((document.location.href.indexOf(linkObj[i].href)>=0 && linkObj[i].href != url.protocol+"//"+url.hostname+"/") || document.location.href == linkObj[i].href) {
      linkObj[i].classList.add("active");
    }
  }
}
window.onload = setActive;

函数setActive（）{
linkObj=document.getElementById（'menu'）.getElementsByTagName（'a'）；
对于（i=0；i=0&&linkObj[i].href！=url.protocol+“/”+url.hostname+“/”）|| document.location.href==linkObj[i].href）{
linkObj[i].classList.add（“活动”）；
}
}
}
window.onload=setActive；
这是为我做的工作。。。
把这个放在body标签的结尾之前

 $(function () {
        var current = location.pathname;
        console.log(current);
        if (current == "/") {
            $('#home').addClass('active'); //#home is the id for root link.
        }
        else {

            $('#navbarCollapse div a').each(function () {
                var $this = $(this);
                // if the current path is like this link, make it active
                if ($this.attr('href').indexOf(current) !== -1) {
                    $this.addClass('active');
                }
            })
        }
    })

非常感谢。使用此选项以及在我的链接前面添加“/”（例如/home.aspx vs home.aspx）更正了
<script>
        //select current menu Item
        $(function () {
            var current = location.pathname.toLocaleLowerCase();
            $('.sidebar li a').each(function () {
                var $this = $(this);
                var href = $this.attr('href');
                href = href.replace(/\?.*/, "").toLocaleLowerCase();
                // if the current path is equal to this link, make it active
                if (href === current) {
                    $this.addClass('active');
                }
            })
        })
    </script>

 <script type="text/javascript">
    jQuery(function ($) {
        var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
        $('ul a').each(function () {
            if (this.href === path) {
                $(this).addClass('active');
            }
        });
    });
</script>

function activateCurrentPage(menuItems){
    var current = location.pathname;
    if (current !== "/") {
    menuItems.each(function(){
        var $this = $(this);
        if($this.attr('href') === current){
            $this.addClass('active');
            $this.attr('aria-current', 'page');
        }
    });
    };  
}

activateCurrentPage( $('#nav li a') );  

#nav a[aria-current="page"]{
   color:red;
}

function setActive() {
  linkObj = document.getElementById('menu').getElementsByTagName('a');
  for(i=0;i<linkObj.length;i++) { 
    const url = new URL(window.location.href);
    if((document.location.href.indexOf(linkObj[i].href)>=0 && linkObj[i].href != url.protocol+"//"+url.hostname+"/") || document.location.href == linkObj[i].href) {
      linkObj[i].classList.add("active");
    }
  }
}
window.onload = setActive;

 $(function () {
        var current = location.pathname;
        console.log(current);
        if (current == "/") {
            $('#home').addClass('active'); //#home is the id for root link.
        }
        else {

            $('#navbarCollapse div a').each(function () {
                var $this = $(this);
                // if the current path is like this link, make it active
                if ($this.attr('href').indexOf(current) !== -1) {
                    $this.addClass('active');
                }
            })
        }
    })