如何一次显示 4 个中的 1 div 个

Question

所以我有 4 link 秒的导航，到 4 div 秒（页面）。我只想一次显示一个页面，页面加载后首先显示 id=home。

为了更清楚，当我点击“提款”link 时，唯一可见的页面应该是 div id="withdrawal"

HTML:

    <!--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" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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" onclick="openPage(); return false;">
      <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-->

CSS:

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

JS:

    <script>

function openPage() {
  // Hide all elements with class="tabcontent" 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>

我也不介意任何 jqueries 的答案，只要它能正常工作。

Answer 1

我做了一个函数，用 class .tabcontent 隐藏每个 div。我向每个 a 添加了一个 evenListener 以查找具有相同 id 的 .tabcontent div 给出了 data-target 的内容。这会将样式更改为 block，其他 div 具有 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 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>

Answer 2

如果您只是想让它工作而不关心如何工作，请考虑 Bootstrap。
为什么要重新发明轮子？

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



<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" 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 class="nav-item" role="presentation">
    <button class="nav-link" 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 class="nav-item" role="presentation">
    <button class="nav-link" 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 class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>

Answer 3

如果您只想显示 x 个元素中的 1 个，我建议在函数中使用 switch 语句，或者将元素包含在对象中，该对象也有一个“isSelected”属性以了解遍历时显示哪一个。

例如开关：

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
}

我更喜欢的方式是使用一个同时包含 div 和它是否被选中的对象，然后将所有这些对象包含在一个数组中，这样您就可以遍历它们并确保当另一个更改为 true 时，未选中的属性更改为 false。例如：

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

无论如何，我强烈建议使用唯一 ID 和对这些 ID 的变量引用

如何一次显示 4 个中的 1 div 个

how to show 1 div out of 4 at a time

html

javascript

css

jquery

frontend