javascript - 将 URL 路径与 <a> attr ('href' 匹配)以动态更新 .active 类

Question

大家好，我的导航栏代码在 navbar.php 文件中，HTML 如下所示:

<nav role="navigation" class="nav" >
      <ul class="menu" id="menu">
        <li class="active"><a href="index.php">
        Home</a></li>
        <li><a href="about-us.php">About us</a></li>
        <li><a href="products.php">Products</a>
            <ul class="submenu">
                <li class="active">product-1</li>
                <li>product-2</li>
                <li>product-3</li>
                <li>product-4</li>
                <li>product-5</li>
                <li>product-6</li>
            </ul>
        </li>
        <li><a href="contactus.php">Contact us</a></li>
      </ul>
</nav>

onpage load 我正在运行一个非常简单的 Jquery 片段来运行所有 <a>并检查他们的 href 是否与浏览器中的 url(实际上是 url 的结尾，例如 index.php)匹配。

所以我有以下 Jquery 片段:

 $(document).ready(function(){

var _urlpath = $(location).attr('pathname');
            console.log(_urlpath);  // this does't print out the desired version , it prints `/lala-v1/about-us.php"`

        $('#menu > li').each(function(){
            var _str = $(this).find('a').attr('href');
            console.log(_str); // these print out the desired output eg. index.php
            if(_str == _urlpath){
                console.log(_str + _urlpath);
            }
        });

});

检查我的评论，我的困难是在 Jquery 的第二行获得正确的 url 路径。我经历了this文章和我看到的所有 Jquery 选项都不会返回我看到的 URL 的结尾部分。

那我该怎么办？我被卡住了，在 JS/Jquery 中有没有办法解决这个问题。

我是这两个领域的新手，所以我将不胜感激任何帮助。

Answer 1

试试这个:

var _urlpath = window.location.pathname.split('/').pop();
// or: $(location).attr('pathname').split('/').pop();