make a div show on page load-CodePudding

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 >
    <ul>
        <li >
            <div >
                <a href="#"  id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
                    <i ></i>
                    <p>Home</p>
                </a>
            </div>
        </li>
        <li >
            <div >
                <a href="#"  id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
                    <i ></i>
                    <p>profile</p>
                </a>
            </div>
        </li>
        <li >
            <div >
                <a href="#"  id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
                    <i ></i>
                    <p>deposit</p>
                </a>
            </div>
        </li>
        <li >
            <div >
                <a href="#"  id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdraw">
                    <i ></i>
                    <p>withdraw</p>
                </a>
            </div>
        </li>
    </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div  id="home">
    <div >
        <h3 >HomePage</h3>
    </div>
</div>
<div  id="profile">
    <div >
        <h3>Profile</h3>
    </div>
</div>
<div  id="deposit">
    <div >
        <h3>Deposit</h3>
    </div>
</div>
<div  id="withdrawal">
    <div >
        <h3>Withdrawal</h3>
    </div>
</div>
<!--End of Pages-->

This is a navigation toggler that toggles between showing different divs id=(home, profile,deposit,withdrawal).

I need the div id=home to show by default immediately the page loads.

CodePudding user response：

I made a function that takes one String argument. Hiding all divs, and after then set the display of the first div that the id is equal the given string. At initialization the given string is 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 >
  <ul>
   <li >
    <div >
<a href="#"  id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
  <i ></i>
  <p>Home</p>
</a>
</div>
</li>
<li >
<div >
<a href="#"  id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
  <i ></i>
  <p>profile</p>
</a>
</div>
</li>
<li >
<div >
<a href="#"  id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
  <i ></i>
  <p>deposit</p>
  </a>
  </div>
</li>
<li >
  <div >
<a href="#"  id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
  <i ></i>
  <p>withdraw</p>
</a>
</div>
</li>
</ul>
</div>
  <!--end of navigation-->
   <!--Pages-->

    
  <div  id="home">
    <div >
     <h3 >HomePage</h3>
    </div>
  </div>
  <div  id="profile">
    <div >
     <h3>Profile</h3>
    </div>
  </div>
  <div  id="deposit">
    <div >
     <h3>Deposit</h3>
    </div>
 </div>
 <div  id="withdrawal">
    <div >
     <h3>Withdrawal</h3>
    </div>
 </div>

 <!--End of Pages-->

CodePudding user response：

It is a lot simpler if you delegate - I gave nav an ID (but you can use querySelector("div.nav") if you do not want to use an ID)

I then use the hidden attribute for simplicity

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  id="nav">
  <ul>
    <li >
      <div >
        <a href="#"  id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
          <i ></i>
          <p>Home</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
          <i ></i>
          <p>profile</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
          <i ></i>
          <p>deposit</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
          <i ></i>
          <p>withdraw</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div  id="home">
  <div >
    <h3 >HomePage</h3>
  </div>
</div>
<div  id="profile">
  <div >
    <h3>Profile</h3>
  </div>
</div>
<div  id="deposit">
  <div >
    <h3>Deposit</h3>
  </div>
</div>
<div  id="withdrawal">
  <div >
    <h3>Withdrawal</h3>
  </div>
</div>
<!--End of Pages-->

CodePudding user response：

Here's one way to approach it. Make your event listener a separate function so you can call it on page load using a 'faked' event object as the argument.

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 >
  <ul>
    <li >
      <div >
        <a href="#"  id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" data-target="home">
          <i ></i>
          <p>Home</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Profile" data-bs-toggle="tooltip" data-bs-placement="right" data-target="profile">
          <i ></i>
          <p>profile</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Deposit" data-bs-toggle="tooltip" data-bs-placement="right" data-target="deposit">
          <i ></i>
          <p>deposit</p>
        </a>
      </div>
    </li>
    <li >
      <div >
        <a href="#"  id="defaultOpen" aria-current="page" title="Withdrawal" data-bs-toggle="tooltip" data-bs-placement="right" data-target="withdrawal">
          <i ></i>
          <p>withdrawal</p>
        </a>
      </div>
    </li>
  </ul>
</div>
<!--end of navigation-->
<!--Pages-->
<div  id="home">
  <div >
    <h3 >HomePage</h3>
  </div>
</div>
<div  id="profile">
  <div >
    <h3>Profile</h3>
  </div>
</div>
<div  id="deposit">
  <div >
    <h3>Deposit</h3>
  </div>
</div>
<div  id="withdrawal">
  <div >
    <h3>Withdrawal</h3>
  </div>
</div>
<!--End of Pages-->