将网址路径与<a> attr(&#39;href&#39;) to dynamically update .active class</a>匹配

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>并检查它们是否与浏览器中的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();

Answer 2

使用prop()代替attr()，它将返回绝对路径，而不是为属性设置的字符串。

比较文件名可能会失败，可能会有不同目录中名称相同的文件。

＆＃13;

＆＃13;

$(document).ready(function(){

        $('#menu > li').each(function(){
            var _str = $(this).find('a').prop('href');

            if(_str == location.href){
                $(this).css('background','red');
            }
        });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <ul class="menu" id="menu">
        <li class="active"><a href="index.html">
        Home</a></li>
        <li><a href="about.html">About us</a></li>
        <li><a href="">This is the current page, should be highlighted by jquery</a></li>
        <li><a href="products.html">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.html">Contact us</a></li>
      </ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

自/lala-v1/about-us.php !== about-us.html以来，这些值不会匹配，再加上您使用＆＃34; .php＆＃34;和链接都是＆＃34; .html＆＃34;。您可以使用它来获取正确的值：window.location.pathname.split('/').pop();