我正在嘗試根據您單擊的選項卡制作顯示內容的活動選項卡。我絕對需要第一個選項卡在默認情況下處于活動狀態,因此我將“活動”類手動放入 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 個活動選項卡,直到我重新單擊第一個選項卡以將其存儲在變量中。我不知道如何解決這個問題。
使用單擊 EventListener 更改活動選項卡,如何在重新加載頁面時添加默認活動選項卡?
慕斯709654
2023-06-15 15:41:20