Question

我有以下的javascript代码，当我在页面上时，我的父菜单项被激活为类，例如https://stackoverflow.com/questions/它有效。但是当我在子页面/子菜单项https://stackoverflow.com/questions/ask/时，我也想将父菜单项置于活动类中，我可以知道该怎么做吗？

示例我在这个页面https://stackoverflow.com/questions/ask/，如何在不使用/ ask的情况下获取此https://stackoverflow.com/questions/的URL，以便我可以让父菜单项（问题）处于活动状态当我在问题的子页面（问）时上课。

以下代码仅在我https://stackoverflow.com/questions/时有效，但如果我在子页面https://stackoverflow.com/questions/ask/，则父链接（https://stackoverflow.com/questions/）不会更改为活动类

<ul class="nav navbar-nav">
            <li><a href="/"><h5>Home</h5></a></li>
            <li class="dropdown">
                <a href="/online/" class="dropdown-toggle " role="button" aria-expanded="false"><h5>Online<span class="caret"></span></h5></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="/online/history/">History</a></li>
                    <li><a href="/online/science/">Science</a></li>
                    <li><a href="/online/math">Mathematics</a></li>
                    <li><a href="/online/english/">English</a></li>
                </ul>
            </li>
        </ul>



<script type="text/javascript">

 var url = window.parent.location.href;
      $('ul.nav a[href="'+ url +'"]').parent().addClass('active');

      $('ul.nav a').filter(function() {
        return this.href == url;
      }).parent().addClass('active');



</script>

Answer 1

您可以使用parents()来匹配父级和所有祖先。给它一个选择器参数，以限制只有li标签。

$('ul.nav a').filter(function() {
    return this.href == url;
}).parents('li').addClass('active');

在子链接页面上触发父链接的活动类

1 个答案: