how to show 1 div out of 4 at a time-CodePudding

So I have a navigation of 4 links, to 4 divs(pages). I want only one page to show at a time, with the id=home showing first once the page loads.

To be clearer, when I click on the "withdraw" link, the only page that would be visible should be the div id="withdrawal"

HTML:

    <!--navigation-->
     <div >
      <ul>
       <li >
        <div >
    <a href="#"  id="" aria-current="page" title="Home" data-bs-toggle="tooltip" data-bs-placement="right" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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-->

CSS:

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

JS:

    <script>

function openPage() {
  // Hide all elements with  by default */
  var i, tabcontent;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i  ) {
  tabcontent[i].style.display = "none";
}

 // Show this tab content on page load
 document.getElementById("home").style.display = "block";
}
 


  </script>

I don't mind any jqueries answers too, so long as it works fine.

CodePudding user response：

I made a function what hide every div with class .tabcontent. I added to every a an evenListener to find the .tabcontent div with the same id what to the a data-target is given. That will be changed the style to block, tho other div has style: none.

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";
  });
});

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

CodePudding user response：

If you just want it to work and you don't care how, consider Bootstrap

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>



<ul  id="myTab" role="tablist">
  <li  role="presentation">
    <button  id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li  role="presentation">
    <button  id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
  <li  role="presentation">
    <button  id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
  </li>
</ul>
<div  id="myTabContent">
  <div  id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
  <div  id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
  <div  id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>

CodePudding user response：

If you only want 1 of x elements to show, I'd suggest using a switch statement in a function, or contain the element inside of an object that also has a "isSelected" property to know which one to show when iterating through.

eg with switch:

let links = ['home', 'profile', 'deposit', 'withdrawal']    // in practise use variable references to the element, preferably by id since the nav won't be changing

const displayDiv = (whichdiv)=>{
    switch(whichdiv){
        case 'home':    // use elements, not strings, this is just for demonstration purposes
            return homeDiv  // the div you want to be shown, returning this will let you append just the one you want to show to the container it sits in
        case 'profile':
            return profilediv
        case 'deposit':
            return depositDiv
        case 'withdrawal':
            return withdrawalDiv
    }
}

const clickhandler = (evt)=>{
    evt.preventDefault()
    let whichIsSelected = displayDiv('home')    // whichIsSelected is now the element you want to be shown
    // remove any div inside the container, then append whichIsSelected to the container
}

The way I'd prefer is with an object containing both the div and whether or not it is selected, then contain all of those objects in an array so you can iterate through them all and make sure the ones that aren't selected have their property changed to false when another one is changed to true. For eg:

let contentContainerDiv = getElementById('content-container-div')
let home = getElementById('home-div')
let profile = getElementById('profile-div')
let deposit = getElementById('deposit-div')
let withdrawal = getElementById('withdrawal-div')
let objhome = {
    page: home,
    isSelected: true    // default set to home
}
let objprofile = {
    page: profile,
    isSelected: false
}
let objdeposit = {
    page: deposit,
    isSelected: false
}
let objwithdrawal = {
    page: withdrawal,
    isSelected: false
}
let pages = [objhome, objprofile, objdeposit, objwithdrawal]

function clickHandler(evt){
    evt.preventDefault()
    pages.forEach( v => v.isSelected = false)
    this.isSelected = true
    loadPageThatsSelected()    
}

function loadPageThatsSelected(){
    let selected = pages.filter( v => v.isSelected )
    contentContainerDiv.removeChild(contentContainerDiv.firstChild)
    contentContainerDiv.appendChild(selected.page)
}

Either way, I strongly recommend using unique id's and variable references to those id's