溫馨提示×

js如何實現(xiàn)點擊導(dǎo)航欄切換頁面功能

js
小億
393
2023-08-08 02:22:32
欄目: 編程語言

可以使用 JavaScript 來實現(xiàn)點擊導(dǎo)航欄切換頁面的功能。下面是一個簡單的示例：

首先，在 HTML 中創(chuàng)建導(dǎo)航欄和對應(yīng)的頁面內(nèi)容區(qū)域：

<nav>
<ul>
<li><a href="#" onclick="showPage('home')">Home</a></li>
<li><a href="#" onclick="showPage('about')">About</a></li>
<li><a href="#" onclick="showPage('contact')">Contact</a></li>
</ul>
</nav>
<div id="home" class="page">Home Page</div>
<div id="about" class="page">About Page</div>
<div id="contact" class="page">Contact Page</div>

接下來，在 JavaScript 中編寫 showPage 函數(shù)來切換頁面：

function showPage(pageId) {
// 隱藏所有頁面
var pages = document.getElementsByClassName('page');
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = 'none';
}
// 顯示選中的頁面
var page = document.getElementById(pageId);
page.style.display = 'block';
}

最后，通過 CSS 來設(shè)置頁面的默認(rèn)顯示和樣式：

.page {
display: none;
}
#home {
display: block;
}

這樣，當(dāng)點擊導(dǎo)航欄的鏈接時，對應(yīng)的頁面就會顯示出來。

0 踩