Javascript 如果URL包含指向链接的增值类+；根

我想添加一个活动链接到我的导航，这取决于使用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>

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;

JS看起来像这样：

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

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;

函数Activelink（）{
link=document.getElementById（'navi'）.getElementsByTagName（'a'）；
对于（i=0；i您可以使用
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;

函数Activelink（）{
link=document.getElementById（'navi'）.getElementsByTagName（'a'）；
对于（i=0；i首先，欢迎使用stack overflow！答案有点取决于您对网站的未来概念，以及您是否有不在导航中的URL。例如，如果您在页脚中有某种版权页可访问，但在导航中没有版权链接，那么应该突出显示什么？主页条目？否条目？此外，我假设/blog和/contact也可以有子页面？比如/blog/什么

因此，不管将来发生什么情况，一个简单的解决方案是反转for循环，并在if子句中添加一个中断：（注意，我将/blog改为/js，因为这是这个测试片段运行的URL的一部分。）


函数activeLink（）{
link=document.getElementById（'navi'）.getElementsByTagName（'a'）；
对于（i=link.length-1；i>=0；i--）{
if（document.location.href.indexOf（link[i].href）！=-1）{
链接[i]。className='active'；
打破
}
}}
window.onload=activeLink；
a.active{
背景色：红色；
}






注意，这在任何版本的IE上都不起作用（但在Edge上会起作用）。