91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

js如何實現點擊導航欄切換頁面功能

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

可以使用 JavaScript 來實現點擊導航欄切換頁面的功能。下面是一個簡單的示例:

首先,在 HTML 中創建導航欄和對應的頁面內容區域:

<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 函數來切換頁面:

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 來設置頁面的默認顯示和樣式:

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

這樣,當點擊導航欄的鏈接時,對應的頁面就會顯示出來。

0
色达县| 峨边| 双牌县| 克山县| 来安县| 东台市| 金湖县| 东乌珠穆沁旗| 当阳市| 正阳县| 晋中市| 甘谷县| 钟山县| 井陉县| 潞西市| 黔西县| 长阳| 新余市| 双桥区| 桐梓县| 宁夏| 嘉祥县| 武宣县| 开远市| 大名县| 丹江口市| 蓬安县| 会同县| 沅江市| 合山市| 祁东县| 桓台县| 化德县| 贡山| 南宁市| 普陀区| 阿瓦提县| 蓬溪县| 哈尔滨市| 新宾| 建宁县|