logo标签列表

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

jqueryhtmlpathname
3
我使用以下代码的 JQuery 来根据菜单项的 URL 向活动菜单项添加类名：
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：

我已经使用了2个变量来表示URL，如下：

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

它可以处理所有类型的内容，但我仍然无法用带有空格的URL定义它，我必须将其替换为%20，如下所示：

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

成为：

<li><a href='/page%202'>page 2</li>
尝试在 console.log 中输出 window.location 对象。它可以告诉你更多信息。 - daremachine
我已经尝试过了。 - Orthemes
4个回答
2
如果您想识别相对和绝对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');
太令人印象深刻了。它在所有情况下都完美地运行。 - Orthemes
0

使用

window.location.href

使用路径名代替

0
如果您想识别相对和绝对URL，我认为不会有一个单独的window.location组件可以匹配两者。请查看jQuery选择器页面。根据您的站点结构，也许您可以使用“属性以...结束”的选择器[name$="value"]：
var aurl = window.location.pathname;
$('.menu li a[href$="'+aurl+'"]').parent('li').addClass('active');
0

我认为您正在尝试在浏览器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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接