Using click EventListener to change active tabs, how do i add a default active tab when reloading the page?

Question

I'm trying to make active tabs that show content depending on which tab you click. I absolutely need the first tab to be active by default so i put the "active" class manually in the HTML so the base content is shown.

The issue is, i do that through an empty variable to hold the state but after you've already clicked once. Here is the code :

function homeLoaded() {
    menuLoaded();
    function menuLoaded() {
        const sideMenuChildren = document.getElementById("sidemenu").childNodes;
        let currentTab;
        for(let i = 0; i < sideMenuChildren.length; i++) {
            const tab = sideMenuChildren[i];
            tab.addEventListener(
                "click",
                function() {
                    if(currentTab) {
                        sideMenuChildren[currentTab].classList.remove("liactive");
                    }
                    currentTab = i;
                    sideMenuChildren[currentTab].classList.add("liactive");
                    showContent(tab.id);
                    console.log("I clicked " + i);
                }
            );
        }
    }

    let currentPage;
    function showContent(menuName) {
        const pageContainer = document.getElementById("content");
        const element = pageContainer.querySelector("." + menuName);
        if(currentPage) {
            currentPage.classList.remove("selected");
        }
        currentPage = element;

        element.classList.add("selected");
    }
}

Here is the HTML :

<div id="main" style="background-image: url(./images/bg2.png);">
    <div id="box">

        <ul id="sidemenu">
            <li id="profil" class="liactive">Profil</li>
            <li id="parcours">Parcours</li> 
            <li id="contact">Contact</li> 
        </ul>
        
        <div id="content">
            <div class="profil selected"><p>Blabla</p></div>
            <div class="parcours"><p>Blablabla</p></div>
            <div class="contact"><p>Blablablabla</p></div>
        </div>
        
        <div id="bottomnav">
            <div id="bottomnavcontent">
            </div>
        </div>
    </div>
</div>

What this does sadly is that when i click another tab...it does not remove the first active tab, so i have 2 active tabs until i re-click the first tab to store it in the variable. I don't know how to fix this.

Answer 1

demo of working code You can get event inside the event listener function. There you can get the target. So,first Remove active class of current tab. Then, set active class for target element. ie

tab.addEventListener(
        "click",
        function (ev) {
          const currentab = document.querySelector(".liactive");
        
          currentab.classList.remove("liactive")
          ev.target.classList.add("liactive")
        
        }
      )