0

Tenho aqui um modelo de navegação por abas que consiste em adicionar uma classe ".active" na aba quando clicar. Até aqui tudo perfeito.

No entanto, preciso que a primeira aba esteja sempre ativa ao carregar a página.

<li class="nav-item"><a class="nav-link active"... ABA1</a></li>

Está assim:

<ul class="nav nav-tabs">
    <li class="nav-item"><a class="nav-link active" id="btn-as" href="#">ABA 1</a></li>
    <li class="nav-item"><a class="nav-link active" id="btn-e" href="#">ABA 2</a><</li>
    <li class="nav-item"><a class="nav-link active" id="btn-ec" href="#">ABA 3</a></li>
    <li class="nav-item"><a class="nav-link active" id="btn-pd" href="#">ABA 4</a></li>
    <li class="nav-item"><a class="nav-link active" id="btn-lo" href="#">ABA 5</a></li>
</ul>

JS:

$(document).ready(function() {
    $("ul li a:first-child").addClass("active");
});


$(function() {
    $("ul li").click(function() {
        var idx = $(this).index();
        $(this)
            .parent()
            .find("li a")
            .removeClass("active");
        $("a", this)
            .toggleClass("active");
        $("div", "#container")
            .removeClass("active")
            .eq(idx)
            .addClass("active");
    });
});

Todas as abas aparecem com active, qual seria o caminho para que a página inicie apenas com a primeira

  • com nav-link "active"?

    1 Resposta 1

    0

    Consegui apenas com ajuste no caminho:

    $(document).ready(function() { 
    $("ul.nav-tabs > li > .nav-link").first().addClass( "active" );
    });
    

    Aqui ele irá incluir a classe active na primeira "li" de classe "nav-link" quando abrir a página.

    Resolvido

    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 .