将活动班级添加到所选锚点

Question

I've this jQuery code to toggle my active class between my anchors but sadly it is not working and it is adding the class active to all the anchors.

$(function() {
  $('.categories-list li a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

and my anchors looks like that:

<a href="/blog/category/motoring+advice+&amp;+tips" class="active">motoring advice &amp; tips</a>
<a href="/blog/category/motoring+news+&amp;+updates" class="active">motoring news &amp; updates</a>

The active class repeated on al of them which is not what i am trying to achieve. i tried to edit it to be like that :

$(function() {
  $('.categories-list li a[href^="/blog/category/' + location.pathname.split("/")[1] + '"]').addClass('active');
});

but still it didn't work.

.categories-list li

This is just my ul class and my li

Answer 1

您的jquery选择器匹配所有锚点，使用ID，更精确的选择器或使用.eq（x），其中x是所需节点的索引。

Answer 2

thats how i solve this problem.

$(document).ready(function() {
        addActiveClass();

        function addActiveClass() {
          var current = window.location.pathname;
          $('.categories-list-blog li a').each(function() {
            var link = '' + $(this).attr('href');
            if (current == link) {
              $(this).addClass('active');
            }
          });
        }
      });