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