Как использовать jQuery для стилизации элементов списка активных ссылок

Question

Я использую jQuery, чтобы проверить, соответствует ли URL браузера URL-адресу в моей ссылке href, проблема заключается в том, что после проверки я пытаюсь установить класс тега li, который соответствует ссылке, чтобы он был "активным", но это код ниже устанавливает тег ссылки как активный, а не тег li

    $(function(){
        var current = location.pathname;
        $('#nav li a').each(function(){
            var $this = $(this);
            // if the current path is like this link, make it active
            if($this.attr('href') === current){
                $this.addClass('active');
            }
        })
    }) 

Answer 1

this относится к элементу a , а не к li , о котором вы думаете, который на самом деле является родителем текущего элемента ( а ).

Вы должны нацелиться на parent()

$this.parent().addClass('active');

ИЛИ: Используя .closest()

$this.closest('li').addClass('active');

Answer 2

Привет

Вы можете попробовать использовать это

$(document).ready(function () {

  $(".nav li").click(function () {
    $(".nav li").removeClass("active");
    $(this).addClass("active");
  });

});

.headerTopMenu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.headerTopMenu li {
    display: inline-block;
    padding: 0 15px;
}
.headerTopMenu li a {
    display: inline-block;
    text-decoration: none;
    font-size: 16px;
    line-height: 40px;
    color: #000;
    position: relative;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s;
    padding: 0;
}
.headerTopMenu li.active a, .headerTopMenu li a:hover {
    color: #f00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headerTopMenu">
  <ul class="nav">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#service">Services</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#blogs">Blog</a></li>
      <li><a href="#contact">contact</a></li>
  </ul>
</div>