所以我有 4 個鏈接的導航，到 4 個 div（頁面）。我希望一次只顯示一個頁面，頁面加載后首先顯示 id=home 。
更清楚地說，當我點擊“withdraw”鏈接時，唯一可見的頁面應該是 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 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>
我也不介意任何 jquery 答案，只要它作業正常。
uj5u.com熱心網友回復：
我做了一個div用 class隱藏每個的函式.tabcontent。我添加到每個aevenListener 以找到與 a相同div的.tabcontent 。那將樣式改為，其他都有。iddata-targetblockdivstyle: 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>uj5u.com熱心網友回復：
如果您只想讓它作業而不關心如何作業，請考慮使用 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 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>uj5u.com熱心網友回復：
如果您只希望顯示 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 的變數參考
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/460468.html
標籤：javascript html jQuery css 前端