如何使用window.location突出显示活动菜单项

我使用JQuery的以下代码根据菜单项的URL将class name添加到活动菜单项：

var aurl = window.location.pathname;
$('.menu li a[href="'+aurl+'"]').parent('li').addClass('active');

问题不在代码本身，而在window.location.pathname中。

当我将URL设置为以下HTML代码时，它就工作了：

<ul>
  <li><a href='/'>home</a></li>
  <li><a href='/page1'>page 1</a></li>
  <li><a href='/page%202'>page 2</li>
</ul>

但当我将URL设置为以下HTML代码时，它不起作用：

<ul>
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
</ul>

我需要的是window.location.pathname，它可以将所有这些情况一起识别出来。

谢谢

更新#1:

我为URL使用了两个变量，如下所示：

var aurl = window.location;
var burl = window.location.pathname;
$('.menu li a[href="'+aurl+'"],.menu li a[href="'+burl+'"]').parent('li').addClass('active');

它适用于所有类型，但我仍然不能用space定义URL，我必须用%20替换它，比如：

<li><a href='/page 2'>page 2</li>

将：

<li><a href='/page%202'>page 2</li>

如果你想识别相对和绝对url，并且你想确保它们完全匹配，你必须获得每个链接的绝对url并匹配它。正如这个答案中所解释的，绝对url在href属性中找到，与特性的url类型无关。

属性没有特殊的选择器（据我所知），所以你可以这样做：

var aurl = window.location.href; // Get the absolute url
$('.menu li a').filter(function() { 
    return $(this).prop('href') === aurl;
}).parent('li').addClass('active');

使用

window.location.href

而不是Pathname

如果您想同时识别相对URL和绝对URL，我认为不会有一个window.location组件同时匹配这两者。看看jQuery选择器页面。根据您的站点结构，也许您可以使用"属性以"选择器[name$="value"]:

var aurl = window.location.pathname;
$('.menu li a[href$="'+aurl+'"]').parent('li').addClass('active');

如果浏览器url等于li>a子href，我认为您正在尝试将活动类添加到li标记中如果这是你想要的，那么这里有一个简单的解决方案：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<ul id="menu">
  <li><a href='http://myhost.com'>home</a></li>
  <li><a href='http://myhost.com/page1'>page 1</a></li>
  <li><a href='/page 2'>page 2</a></li>
  <li><a href='http://myhost.com/page 3'>page 3</a></li>
  <li><a href='http://myhost.com/page%204'>page 4</a></li>
  <li><a href="test.html">test</a></li>
</ul>
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu a").click(function(){
            var browserUrl = window.location.href;
            var myUrl = $(this).attr('href');
            alert(browserUrl);
            alert(myUrl);
            if(browserUrl === myUrl ){
                $(this).parent().addClass('active');
            }
        return false; // to prevent the default behavior of the a tag when clicked
        });
    });
</script>
</body>
</html>

相关内容

最新更新

热门标签：