javascript - Jquery/Javascript 解决方案 URL 匹配 Href 然后添加一个类

Question

所以，我有一个基本页面，我需要在其中突出显示我的用户所在的位置。得到了 ul > li > a

的导航

我的想法是获取当前页面的URL，并与一个“a”的特定href进行匹配。

结构:

   <header>

<a href="#" id="toggle-nav"><span class="trigger"></span></a>

<nav>
    <ul id="nav-top">
        <li><a href="../Index/Index.html" title="Home">Home</a></li>
        <li><a href="#" title="#">Aluno</a>
            <ul class="sub-menu">
                <li><a href="../Index/areadoaluno.html" title="Area do Aluno">Area Do Aluno</a></li>
                <li><a>sub-item</a></li>
                <li><a>sub-item</a></li>
            </ul>
        </li>
        <li><a href="#">Json</a>
            <ul class="sub-menu">
                <li><a href="Json.html" title="Teste Json">Json Teste</a></li>
                <li><a>sub-item</a></li>
                <li><a>sub-item</a></li>
            </ul>
        </li>
    </ul>
</nav>
</header>

还有带有 javascript 的 jquery(可以将这两个家伙混合在一起吗？):

var url = window.location.pathname.split( '/' );
var i;
var location = "";

for(i = 0; i < url.length; i++)
    {
        location += url[i];     
    }


    $('#nav-top a').each(function(){

    var href = $(this).attr('href'); 

        if( location.indexOf(href) > -1 ) 

        {
            alert("Yes!");

        } 

    });
});

我正在研究 Jquery 和 jscript，所以我有点新，我正在研究一种解决方案，可以找到我的 url 的一部分并将其与特定的 href 匹配，与 url 的大小和我去的地方无关。

Answer 1

工作中jsfiddle

我认为你可以按照所示的方式进行操作。无需循环 url，也无需额外的变量 location。

var url = window.location.pathname.split('/');

$('#nav-top a').each(function() {
    var href = $(this).attr('href'); 
    if (url.indexOf(href) > -1) {
        alert("Yes!");
    } 
});

是的，混合 jQuery 和 JS 是完全可以的。 jQuery 是一个 JS 库，因此它就是为此而生的