Question

我需要将我所在页面的网址与导航栏中的li元素进行比较，使用jQuery。

到目前为止，我将当前的url分配给变量，如此

var currentPage = window.location.href;

然后我有一个.each函数检查导航栏中的每个项目，如此

$("nav ul li a").each(
    function() {

    }
);

现在，我假设我需要在函数内部使用某种if语句，也许是这样的？

if(currentPage === ????) {};

我能弄清楚的是如何比较列表中的网址？

基本上我希望我在导航栏中突出显示的任何页面。一旦我弄清楚如何让jQuery确认我所在的页面并将其与导航栏进行匹配，我将使用.css来更改背景图像以使我能够在哪个页面中脱颖而出在导航栏上。我在一个jQuery类中，这是已经分配的东西。

我在这里搜索过，我无法找到真正匹配的东西，我正试图这样做。

希望有人有一些见解......如果这个问题有意义，我实际上只是想把这个问题写成一个问题，而不是把它弄清楚......

Answer 1

我想你可能在寻找：

this.href

这应该为您提供您正在循环的标签的实际href。

（答案有所改进，感谢下面的评论）

Answer 2

你可以使用parse（..）匹配链接是否是当前页面。演示无法在stackoverflow中正确运行，如果你想看到结果，你应该去codepen。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<style>
    a {
        color: #000;
    }

    a.active {
        color: red;
    }
</style>
<nav>
    <ul>
        <li><a href="?home">Home</a></li>
        <li><a href="?contact">Contact</a></li>
        <li><a href="?about">About</a></li>
        <li><a href="?contact#hash">Contact Us</a></li>
    </ul>
</nav>
<script>

function parse(url) {
    var parts = url.match(/^([^#?]*?)?(\?.*?)?(#.*)?$/);
    return {
        uri: parts[1], search: parts[2], hash: parts[3],
        /**
         *
         * @param that <b>string</b>/<b>object</b> has `href` property,e.g:location
         * @param hash skip hash matching
         * @param search skip search matching
         * @returns {boolean|*} if url matched return `true`,otherwise return `false`.
         */
        match: function (that, hash, search) {
            var self = this, that = parse(typeof that == 'string' ? that : that.href);
            return (!self.uri || self.uri == that.uri)
                && (search || self.search == that.search)
                && (hash || self.hash == that.hash);
        }
    };
}



$('nav li a').each(function () {
    console.log(['matching with ', this.href, '===>', parse(this.href).match(location)].join(' '));
    console.log(['matching with ', $(this).attr('href'), '===>', parse($(this).attr('href')).match(location)].join(' '));
    if (parse($(this).attr('href')).match(location/*,true*/))//remove comment and try the result.
        $(this).addClass('active');
});

</script>

Answer 3

对于任何看过这个的人我都知道使用这个和.each。这是它的样子。

var currentPage = window.location.href;

$("nav ul li a").each(
    function() {
        console.log($(this).attr("href"));
        if (currentPage.indexOf($(this).attr("href")) !== -1){
            $(this).addClass("highlight");
            return false;
        }
     }
);

当我第一次尝试解决这个问题时，我感觉很糟糕，我想我误解了我的老师并且过度思考这个问题。无论如何，这很有效。

如何将当前页面网址与导航栏匹配？

3 个答案: