在頁面加載時顯示div-有解無憂

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 默認情況下立即顯示頁面加載。

uj5u.com熱心網友回復：

我制作了一個帶有一個 String 引數的函式。隱藏所有 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-->

uj5u.com熱心網友回復：

如果你委托它會簡單得多 - 我給了 nav 一個 ID（但如果你不想使用 ID，你可以使用 querySelector("div.nav") ）

然后為了簡單起見，我使用 hidden 屬性

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-->

uj5u.com熱心網友回復：

這是處理它的一種方法。使您的事件偵聽器成為一個單獨的函式，以便您可以在頁面加載時使用“偽造”事件物件作為引數呼叫它。

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-->

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460654.html

標籤：javascript html css 前端

上一篇：不能使用ReactContext中的變數來訪問物件的值

下一篇：如何避免角材料中的額外墊形場下劃線