Add class by selector only in the first tab of Tabs when loading page

Question

I have here a tab navigation template that consists of adding a class ".active" in the tab when you click. So far everything is perfect.

However, I need the first tab to always be active when loading the page.

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

It’s like this:

<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");
    });
});

All tabs appear with active, which would be the way for the page to start only with the first

with Nav-link "active"?

Answer 1

I only got it with adjustment on the way:

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

Here it will include the active class in the first "li" class "Nav-link" when opening the page.

Solved