在页面加载时显示一个 div

Question

 const links = Array.from(document.querySelectorAll("a")); const tabs = Array.from(document.querySelectorAll(".tabcontent")) const hideAll = () => tabs.forEach((tab)=>tab.style.display = "none"); hideAll(); links.forEach((link)=>{ link.addEventListener("click", (e)=>{ e.preventDefault(); hideAll(); tabs.filter(tab => tab.id === link.dataset.target)[0].style.display = "block"; }); });

 .tabcontent{ display: none; color: white; }

 <!--navigation--> <div class="col nav"> <ul> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home"> <i class="fa-solid fa-house-user bi"></i> <p>Home</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile"> <i class="fa-solid fa-house-user bi"></i> <p>profile</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit"> <i class="fa-solid fa-house-user bi"></i> <p>deposit</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdraw"> <i class="fa-solid fa-house-user bi"></i> <p>withdraw</p> </a> </div> </li> </ul> </div> <!--end of navigation--> <!--Pages--> <div class="tabcontent col" id="home"> <div class="text-center bg-black"> <h3 class="">HomePage</h3> </div> </div> <div class="tabcontent" id="profile"> <div class="text-center bg-primary"> <h3>Profile</h3> </div> </div> <div class="tabcontent" id="deposit"> <div class="text-center bg-danger"> <h3>Deposit</h3> </div> </div> <div class="tabcontent" id="withdrawal"> <div class="text-center bg-warning"> <h3>Withdrawal</h3> </div> </div> <!--End of Pages-->

这是一个导航切换器，可以在显示不同的 div id=(home, profile,deposit,withdrawal) 之间切换。

默认情况下，我需要 div id=home 立即显示页面加载。

Answer 1

这是处理它的一种方法。 使您的事件侦听器成为一个单独的 function，这样您就可以使用“伪造”事件 object 作为参数在页面加载时调用它。

 document.addEventListener("DOMContentLoaded", () => { let links = document.querySelectorAll("li.nav-item a") links.forEach((link) => link.addEventListener("click", doLink)); function doLink(e) { if (e.hasOwnProperty('preventDefault')) e.preventDefault(); document.querySelectorAll(".tabcontent").forEach(t => t.classList.toggle('show', e.currentTarget.dataset.target === t.id)); links.forEach(t => t.closest('li').classList.toggle('active', t.dataset.target == e.currentTarget.dataset.target)) } doLink({ currentTarget: document.querySelector('[data-target=home]') }) })

 .tabcontent { display: none; }.tabcontent.show { display: block; }.active { background: yellow; }

 <!--navigation--> <div class="col nav"> <ul> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home"> <i class="fa-solid fa-house-user bi"></i> <p>Home</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile"> <i class="fa-solid fa-house-user bi"></i> <p>profile</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit"> <i class="fa-solid fa-house-user bi"></i> <p>deposit</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal"> <i class="fa-solid fa-house-user bi"></i> <p>withdrawal</p> </a> </div> </li> </ul> </div> <!--end of navigation--> <!--Pages--> <div class="tabcontent col" id="home"> <div class="text-center bg-black"> <h3 class="">HomePage</h3> </div> </div> <div class="tabcontent" id="profile"> <div class="text-center bg-primary"> <h3>Profile</h3> </div> </div> <div class="tabcontent" id="deposit"> <div class="text-center bg-danger"> <h3>Deposit</h3> </div> </div> <div class="tabcontent" id="withdrawal"> <div class="text-center bg-warning"> <h3>Withdrawal</h3> </div> </div> <!--End of Pages-->

Answer 2

我制作了一个带有一个字符串参数的 function。 隐藏所有div，然后设置显示id等于给定字符串的第一个div。 在初始化时，给定的字符串是 home。

 const links = Array.from(document.querySelectorAll("a")); const tabs = Array.from(document.querySelectorAll(".tabcontent")) const hideAll = () => tabs.forEach((tab) => tab.style.display = "none"); const showOne = (target) => { hideAll(); tabs.filter(tab => tab.id === target)[0].style.display = "block"; } showOne("home"); links.forEach((link)=>{ link.addEventListener("click", (e) => { e.preventDefault(); showOne(link.dataset.target); }); });

 <!--navigation--> <div class="col nav"> <ul> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home"> <i class="fa-solid fa-house-user bi"></i> <p>Home</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile"> <i class="fa-solid fa-house-user bi"></i> <p>profile</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit"> <i class="fa-solid fa-house-user bi"></i> <p>deposit</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal"> <i class="fa-solid fa-house-user bi"></i> <p>withdraw</p> </a> </div> </li> </ul> </div> <!--end of navigation--> <!--Pages--> <div class="tabcontent col" id="home"> <div class="text-center bg-black"> <h3 class="">HomePage</h3> </div> </div> <div class="tabcontent" id="profile"> <div class="text-center bg-primary"> <h3>Profile</h3> </div> </div> <div class="tabcontent" id="deposit"> <div class="text-center bg-danger"> <h3>Deposit</h3> </div> </div> <div class="tabcontent" id="withdrawal"> <div class="text-center bg-warning"> <h3>Withdrawal</h3> </div> </div> <!--End of Pages-->

Answer 3

如果你委托它会简单得多 - 我给了 nav 一个 ID（但如果你不想使用 ID，你可以使用 querySelector("div.nav")）

然后为了简单起见，我使用隐藏属性

 window.addEventListener("DOMContentLoaded", () => { // when page is ready const tabs = document.querySelectorAll(".tabcontent"); const nav = document.getElementById("nav"); const hideAllBut = id => tabs.forEach(tab => tab.hidden = tab.id;= id) hideAllBut("home"). nav,addEventListener("click". e => { // a click in the nav div const tgt = e.target.closest("a") if (tgt) { e;preventDefault(). hideAllBut(tgt.dataset;target); } }); });

 <!--navigation--> <div class="col nav" id="nav"> <ul> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home"> <i class="fa-solid fa-house-user bi"></i> <p>Home</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile"> <i class="fa-solid fa-house-user bi"></i> <p>profile</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit"> <i class="fa-solid fa-house-user bi"></i> <p>deposit</p> </a> </div> </li> <li class="nav-item nav-li"> <div class="py-3"> <a href="#" class="" id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal"> <i class="fa-solid fa-house-user bi"></i> <p>withdraw</p> </a> </div> </li> </ul> </div> <!--end of navigation--> <!--Pages--> <div class="tabcontent col" id="home"> <div class="text-center bg-black"> <h3 class="">HomePage</h3> </div> </div> <div class="tabcontent" id="profile"> <div class="text-center bg-primary"> <h3>Profile</h3> </div> </div> <div class="tabcontent" id="deposit"> <div class="text-center bg-danger"> <h3>Deposit</h3> </div> </div> <div class="tabcontent" id="withdrawal"> <div class="text-center bg-warning"> <h3>Withdrawal</h3> </div> </div> <!--End of Pages-->

Answer 4

您可以在 javascript 中使用 Window.onload = function(){}