Я пытаюсь добавить активный класс к элементам панели навигации на моем сайте при нажатии на них.

Я хочу добавить активный класс к элементу navbar, на который я нажимаю, на моем сайте. В моем JS-коде он говорит программе, какой класс искать в разделе ("nav-item"). Затем он говорит моей программе удалить активный класс из текущего активного класса, а затем добавить активный класс к классу, на который кликнули. Я предполагаю, что логика верна, но, скорее всего, я упустил синтаксис. Я новичок в HTML и JS, поэтому любая помощь будет очень признательна.

HTML код:

<ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                </ul>

JS-код:

$('.nav-item').on('click', '.nav-link js-scroll-trigger', function () {
        $('.nav-link js-scroll-trigger active').removeClass('active');
        $(this).addClass('active');
    });

$(document).ready(function(){
  $('.nav-link').click(function(){
    $('.nav-link').removeClass("active");
    $(this).addClass("active");
});
});


$(document).ready(function(){
  $('.nav-link').click(function(){
    $('.nav-link').removeClass("active");
    $(this).addClass("active");
});
});
.active{
color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="navbar-nav">
                    <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li>
                    <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li>
                </ul>

Вернуться на верх