使用单击 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

您可以在事件侦听器函数中获取事件。在那里你可以得到目标。所以，首先删除当前选项卡的活动类。然后，为目标元素设置活动类。IEtab.addEventListener(        "click",        function (ev) {          const currentab = document.querySelector(".liactive");                  currentab.classList.remove("liactive")          ev.target.classList.add("liactive")                }      )