基于URL

主动导航

我的导航菜单看起来像这样基于URL

<div id="menu-div"> 
<ul> 
<li><a href="localhost/admin/">Admin</a></li> 
<li><a href="localhost/admin/page/">Pages</a></li> 
<li><a href="localhost/admin/image/">Gallery</a></li> 
<li><a href="localhost/admin/account/">Accounts</a></li> 
<li><a href="localhost/admin/role">Roles</a></li> 
<li><a href="localhost/admin/theme">Layout</a></li> 
<li><a href="localhost/admin/backup">Backup</a></li> 
</ul> 
</div>

我想主动类添加到基于URL的导航链接。我尝试了以下jQuery功能

$(function() { 
    $('#menu-div a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
     });

此函数将所有链接设置为活动而不是仅当前活动。 jQuery函数一定有问题。我对它不太满意。任何帮助将非常感激。谢谢。

来源

2015-01-07 Bidhan A

您可以简单地使用location.pathname与jQuery的选择的endsWith [ attr $=""] ，您可以使用它来搜索字符串中的子字符串。在这种情况下，您正在尝试查找指定的路径。这总比包含可以匹配像

/管理 /管理/ foobar的 /foobar的/管理员

将全部匹配/管理

但等待

该解决方案类似的路径太简单了。我们需要确保路径与所提供的href完全匹配！

$(function() { 
    (function(){ 
     var path = location.pathname; 
     $('#menu-div * a[href$="'+ path+'"]').each(function(index,element){ 
      var href = $(this).attr('href'); 
      if(href.indexOf('http://') !== -1){ 
       var exact = href.substring(7,href.length).split('/'); 
      }else{ 
       var exact = href.split('/'); 
      } 
      exact[0] = '';//get rid of the host 
      exact = exact.join('/'); 
      if(path == exact){ 
       $(this).addClass('active'); 
      } 
     }); 
    })(); 
});

fiddle（请注意，你必须点击运行，因为jsfiddle.net使用JavaScript别名的实际路径。

来源

2015-01-07 04:11:03 r3wt

谢谢你让我很快乐。 –

@BidhanA请稍候，我将改进代码，它可能会错误地匹配其他路径 – r3wt

@BidhanA更新了一个更正确的答案，应该防止类似名称中的路径结尾，以及相对的href，例如'/路径/到/页面'与出HTTP和主机名称。 – r3wt

的JQuery的onLoad：

function() { 
var whereAmI = window.location.pathname; 
    switch(whereAmI){ 
    case "www.yourwebsite.com": 
     /*do what you want*/ 
     break; 
}  
}();

来源

2015-01-07 03:50:53 ZenStein

有点哈克，但它会奏效。 – ZenStein

我不知道你是有工作，所以我会做出一个了一个例子的完整路径。比方说，你的路径是：

file:///Users/yourname/Desktop/test.html

当你拨打：

location.pathname.split("/")

你得到一个数组，看起来像这样：

["", "Users", "yourname", "Desktop", "test.html"]

然后当你调用[1]该数组你上第二个结果（索引从0开始），在这种情况下是：

Users

这不是你想要的。你正在寻找这样的路径：localhost/admin/。所以，这取决于你的路径实际上是，你可能会寻找：

window.location.pathname

或整个路径减去协议：

window.location.hostname + window.location.pathname

来源

2015-01-07 03:52:33 jmore009

回答

相关问题