3

我正在使用以下代码根据菜单项的 向活动菜单项JQuery添加一个：class nameURL

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');

它适用于所有类型，但我仍然无法定义URL，space我必须将其替换为%20：

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

成为：

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

4 回答 4

2

如果您想同时识别相对 url 和绝对 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');
于 2015-03-02T15:49:00.303 回答
0

采用

window.location.href

而不是路径名

于 2015-03-02T02:10:53.160 回答
0

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

var aurl = window.location.pathname;
$('.menu li a[href$="'+aurl+'"]').parent('li').addClass('active');
于 2015-03-02T15:40:34.433 回答
0

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

<!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>
于 2015-03-02T16:01:56.530 回答