使用单击 EventListener 更改活动选项卡，如何在重新加载页面时添加默认活动选项卡？

Question

我正在尝试根据您单击的选项卡制作显示内容的活动选项卡。我绝对需要第一个选项卡在默认情况下处于活动状态，因此我将“活动”类手动放入 HTML 中，以便显示基本内容。问题是，我通过一个空变量来保持状态，但是在你已经点击一次之后。这是代码：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");    }}这是 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>令人遗憾的是，当我单击另一个选项卡时...它不会删除第一个活动选项卡，因此我有 2 个活动选项卡，直到我重新单击第一个选项卡以将其存储在变量中。我不知道如何解决这个问题。

Answer 1

您可以在事件侦听器函数中获取事件。在那里你可以得到目标。所以，首先删除当前选项卡的活动类。然后，为目标元素设置活动类。IE

tab.addEventListener(

        "click",

        function (ev) {

          const currentab = document.querySelector(".liactive");

        

          currentab.classList.remove("liactive")

          ev.target.classList.add("liactive")

        

        }

      )