How to highlight the menu option for the current page?

Question

Hello. I am making a site with tabs, and would like to know how to make the section (word) of the menu highlighted according to the image. I managed to put, but it only stays on the menu Beginning, I would like when I was on the page About blue dash was on the menu About and so on if you accessed the other menu items. Thank you very much.

HTML code

<div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="{% url 'pages:home' %}"  class="nav__link active">Início</a></li>
                        <li class="nav__item"><a href="{% url 'pages:sobre' %}"  class="nav__link">Sobre</a></li>
                        <li class="nav__item"><a href="{% url 'pages:skills' %}"  class="nav__link">Skills</a></li>
                        <li class="nav__item"><a href="{% url 'pages:projetos' %}"  class="nav__link">Trabalho</a></li>
                        <li class="nav__item"><a href="{% url 'blog:list' %}"  class="nav__link">Blog</a></li>
                        <li class="nav__item"><a href="{% url 'contato:contato_email' %}"  class="nav__link">Contato</a></li>
                    </ul>
                </div>

JS Code

$('.nav__link').click(function(){
    //remove class active
    $('.nav__link').removeClass('active');
    //adiciona class active ao item clicado
    $(this).addClass('active');
});

Answer 1

you have removed the active class without having created it. Here

    
<div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item"><a href="{% url 'pages:home' %}"  class="nav__link active">Início</a></li>
                        <li class="nav__item"><a href="{% url 'pages:sobre' %}"  class="nav__link">Sobre</a></li>
                        <li class="nav__item"><a href="{% url 'pages:skills' %}"  class="nav__link">Skills</a></li>
                        <li class="nav__item"><a href="{% url 'pages:projetos' %}"  class="nav__link">Trabalho</a></li>
                        <li class="nav__item"><a href="{% url 'blog:list' %}"  class="nav__link">Blog</a></li>
                        <li class="nav__item"><a href="{% url 'contato:contato_email' %}"  class="nav__link">Contato</a></li>
                    </ul>
                </div> 

It should be like this,

<div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item active"><a href="{% url 'pages:home' %}"  class="nav__link active">Início</a></li>
                        <li class="nav__item"><a href="{% url 'pages:sobre' %}"  class="nav__link">Sobre</a></li>
                        <li class="nav__item"><a href="{% url 'pages:skills' %}"  class="nav__link">Skills</a></li>
                        <li class="nav__item"><a href="{% url 'pages:projetos' %}"  class="nav__link">Trabalho</a></li>
                        <li class="nav__item"><a href="{% url 'blog:list' %}"  class="nav__link">Blog</a></li>
                        <li class="nav__item"><a href="{% url 'contato:contato_email' %}"  class="nav__link">Contato</a></li>
                    </ul>
                </div>

So I applied the JS, I just added a snippet that will identify on which page you are browsing

$('.item-menu').click(function(e) {
  $('.item-menu').removeClass('active');
  $(this).addClass('active');
});
//Aqui é onde ocorre a localização de que página o usuário se encontra.
const href = [location.pathname, location.search].join('?');
$('.item-menu[href="' + href + '"]').addClass('active');