使用jQuery加载菜单.html，然后使当前链接处于活动状态

Question

试图将'Active'类添加到与当前页面相对应的链接，在菜单中存储的菜单上，并与JQuery一起使用index.html。

我已经设法将我的菜单调用。CSS造型都完美地穿过。但是，由于我现在不单独将"活动"类添加到每个菜单项，所以我需要一种做到这一点的方法。当它全部在index.html中的一个屋顶下时，我设法将活动类添加到菜单中，但现在我将其移到了自己的单独文件中。我有能力可以使链接工作或添加了"活动"，如下所示。

菜单.html：

$(document).ready(function() {
  $(function() {
    $('.side a').click(function(e) {
      e.preventDefault();
      $('a').removeClass('active');
      $(this).addClass('active');
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="side">
  <a href="/intro.html">Intro</a>
  <a href="/contact.html">Contact</a>
  <a href="/about.html">About</a>
</div>

我希望以上显示我的菜单，显示活动链接，然后显示链接将用户带到每个不同的页面。菜单已显示，它确实显示了活动链接，但是链接现在不起作用。

Answer 1

您可以声明一个URL变量以查看当前页面，然后向其添加活动类：

<script>
    // This line will give you the active page without parameters
    var url = window.location.href.split('/')[window.location.href.split('/').length-1].split('?')[0];
    $('a[href$="'+url+'"]').addClass('active');
</script>