Question

我的导航菜单如下所示

<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函数肯定有问题。我对它并不那么好。任何帮助将非常感激。感谢。

Answer 1

您可以简单地使用location.pathname和jQuery endswith selector [ attr $=""]，您可以使用它来搜索字符串中的子字符串。在这种情况下，您正在尝试查找指定的路径。这比包含类似路径的包含更好，比如

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

将全部匹配/ admin

但等待

这个解决方案太简单了。我们需要确保路径与提供的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来为实际路径名添加别名。

Answer 2

JQuery onLoad：

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

Answer 3

我不知道你正在使用的完整路径所以我会举一个例子。让我们说你的道路是：

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

Answer 4

如果要激活同一路径，请单击该路径的其他链接，

path= "/First" =>>> path for First will active.
path= "/First/Second" path for First will active too.



 $(document).ready(function () {
            var path = window.location.pathname;
            if (path != "/") {
                $("#menuitems li a[href*='" + path + "']").addClass("active");
                var arr = path.split('/');
                if (arr.length > 2) {
                    var pathtoactive = "/" + arr[1];
                    $("#menuitems li a[href*='" + pathtoactive + "']").addClass("active");
                }
            }
        });

基于URL的主动导航

4 个答案: