提问者:小点点

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


尝试将'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,它确实显示了活动链接,但链接现在不工作了。


共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>