-2

inserir a descrição da imagem aqui

Olá. Estou fazendo um site com abas, e gostaria de saber como faço para deixar a seção (palavra) do menu em destaque de acordo com a imagem. Eu consegui colocar, porém ele só fica no menu Início, gostaria de quando estivesse na página Sobre o traço azul ficasse no menu Sobre e assim sucessivamente caso acessasse os outros itens do menu. Desde já muito obrigado.

Código HTML


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

Código JS

$('.nav__link').click(function(){
    //remove class active
    $('.nav__link').removeClass('active');
    //adiciona class active ao item clicado
    $(this).addClass('active');
});
2
  • Se vc vai tentar com JS uma alternativa que vc pode testar é pegar o window.location e aplicar a classe na opção com o href correspondente
    – hugocsl
    22/04/2021 às 11:05
  • Eu coloquei CSS também, mas só fica travado no inicio, ele não está dinâmico. .active::after{ position: absolute; content: ""; width: 100%; height: 0.18rem; left: 0; top: 2rem; background-color: var(--first-color); }
    – epc
    22/04/2021 às 13:52

1 Resposta 1

0

você removeu a classe active sem ter criado ela.Nesse trecho

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

Deveria ser assim,

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

Então aplicava o JS, somente adcionei um trecho que vai identificar em qual página você ta navegando

$('.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');

3
  • Ele continua com erro no JS...
    – epc
    24/04/2021 às 22:46
  • Oi, é que esqueci de mudar mas onde tem nav-item deveria ser item-menu. 24/04/2021 às 22:48
  • Ele continua com esse erro de Uncaught ReferenceError: $ is not defined
    – epc
    24/04/2021 às 22:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .