在页面加载时显示 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-->

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

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

Answer 1

我创建了一个接受一个字符串参数的函数。隐藏所有 divs，然后设置显示第一个 div id 等于给定字符串。初始化时给定的字符串是 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 2

如果你委托就简单多了——我给了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 3

这是一种处理方法。使您的事件侦听器成为一个单独的函数，以便您可以使用 'faked' 事件对象作为参数在页面加载时调用它。

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 4

您可以在 javascript

中使用 Window.onload = function(){}

在页面加载时显示 div

make a div show on page load

html

javascript

css

frontend