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

Question

尝试将'active'类添加到与当前页面相对应的链接中，该链接位于menu.html中存储的菜单上，并通过jQuery将其拉到index.html。

我已经设法用JQuery调用了menu.html文件，并将菜单插入index.html。CSS的造型都很完美。但是，由于我现在不是单独添加'active'类到每个菜单项，所以我需要一个方法来实现这一点。在index.html中所有活动类都在一个屋檐下时，我已经设法向菜单添加了一个活动类，但现在不是了，我已经将它移到了它自己的单独文件中。我已经得到的要点是，要么有工作的链接，或有‘活动’添加，如下所示。

菜单.html：

null

$(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>

null

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

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>