1

Pessoal gostaria de criar uma função em javascript que quando o usuário clicar em algum item do menu o mesmo fica com o active, fiz algumas pesquisa na internet mas não consegui reproduzir em meu código.

<nav class="site-menu">
<ul id="nav">
    <li >
        <a asp-controller="Home" asp-action="Index" onclick="mostrarAtivo"><span>Home</span></a>
    </li>
    <li >
        <a  asp-controller="QuemSomos" asp-action="Index" onclick="mostrarAtivo"><span>Quem Somos</span></a>
    </li>

    <li onclick="mostrarAtivo">
        <a><span>Lançamentos</span></a>
        <ul class="sub-menu">
            <li><a asp-controller="Imoveis" asp-action="Casas">Casas</a></li>
            <li><a asp-controller="Imoveis" asp-action="Apartamentos">Apartamentos</a></li>
            <li><a asp-controller="Imoveis" asp-action="SalasComercial">Salas Comerciais</a></li>

        </ul>
    </li>

    <li onclick="mostrarAtivo">
        <a><span>Imóveis</span></a>
        <ul class="sub-menu">
            <li><a asp-controller="Imoveis" asp-action="Alugar">Alugar</a></li>
            <li><a asp-controller="Imoveis" asp-action="Comprar">Comprar</a></li>
        </ul>
    </li>

    <li>
        <a asp-controller="CadastroImovel" asp-action="Proprietario"><span>Cadastre seu imóvel</span></a>
    </li>
    <li>
        <a href="components/accordion.html"><span>Contato</span></a>
    </li>
</ul>
</nav>

js:

<script>
    function setActive() {
        aObj = document.getElementById('li').getElementsByTagName('a');
        for (i = 0; i < aObj.length; i++) {
            if (document.location.href.indexOf(aObj[i].href) >= 0) {
                aObj[i].className = 'active';
            }
        }
    }
</script>

Basicamente é o usuário clicar e ativar o active do bootstrap

1 Resposta 1

2

Opa Amigo, Utilizando o jquery da pra fazer da seguinte forma:

$('a').on('click',function(){
    $(this).toggleClass('active')
})

pega todos elementos a utilizando o seletor $('a') e adiciona um listener de click para cada um deles deles.

depois adiciona o this, dizendo que o elemento clicado vai receber a classe active.

O toggle faz que sempre que clicado no elemento ele adiciona ou remove a classe.

Espero ter ajudado.

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 .