如何使用window.location高亮显示活动的菜单项？

Question

我正在使用 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 使用了 2 个变量，如下所示：

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>

Answer 1

使用

window.location.href

而不是路径名

Answer 2

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

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

Answer 3

如果您想要同时识别相对和绝对 url，并且您想要确保它们完全匹配，您将必须获得每个 link 的绝对 url并匹配它。正如 this answer 中所解释的，绝对 url 在 href 属性中找到，与 [=22= 的类型无关] 在属性中。

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

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

Answer 4

如果浏览器 url 等于 li>a child href，我认为您正在尝试将 active class 添加到 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>

如何使用window.location高亮显示活动的菜单项？

How to use window.location to highlight the active menu item?

html

jquery

pathname