如何使用 HTML / CSS 實現導航欄
[英]How to implement a navbar with HTML / CSS
問題描述
網上有幾個這樣的例子，只使用 HTML 和 CSS，或 Bootstrap。 他們經常有這樣的例子：
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
我想要的是導航欄不必在每次刷新/鏈接點擊時加載。 示例中的錨點是否應該被包含完整導航欄源的其他頁面的鏈接替換？
什么是典型的實現，以便導航欄保持靜態？
如何使用 HTML/CSS 在頁面之間實現靜態導航欄？
4 個解決方案
解決方案1
3 2016-10-06 16:57:59
HTML
<ul class="w3-navbar">
<li><a href="#" onclick="openCity('London')">London</a></li>
<li><a href="#" onclick="openCity('Paris')">Paris</a></li>
<li><a href="#" onclick="openCity('Tokyo')">Tokyo</a></li>
</ul>
將您的內容放入上面的每個列表項中。
JS
openCity("London");
function openCity(cityName) {
var i;
var x = document.getElementsByClassName("city");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(cityName).style.display = "block";
}
首先，調用openCity()打開“London”（id=“London”）。
然后，當用戶單擊菜單中的按鈕之一時，使用不同的城市名稱 (id="Paris) 調用open City() 。
openCity()函數隱藏類名稱為“city”的所有元素（display="none"），並顯示具有給定城市 ID 的元素（display="block"）。
來自http://www.w3schools.com/w3css/w3css_tabulators.asp ，您也可以在其中找到其他示例。
解決方案2
1 已采納 2016-10-06 17:08:44
接受的答案的一個問題是瀏覽器必須在頁面加載時加載所有選項卡的內容。 如果您的選項卡有很多內容並且您的用戶使用移動設備，這可能不是很好。 解決該問題的一種方法是使用 iframe。 下面是一個例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<ul>
<li><a target="iframe" href="page1.html">Tab1</a></li>
<li><a target="iframe" href="page2.html">Tab2</a></li>
<li><a target="iframe" href="page3.html">Tab3</a></li>
</ul>
<iframe name="iframe" src="" onload="resizeIframe(this)" style="width:100%;"></iframe>
</body>
<script type="text/javascript">
function resizeIframe(iframe) {
iframe.style.height = 0;
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + "px";
}
</script>
</html>
這只會在單擊鏈接時將每個頁面的內容加載到 iframe 中。 請注意，還必須創建 news.html、contact.html 和 about.html。
解決方案3
0 2016-10-06 17:10:07
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:300px;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
<ul>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
解決方案4
0 2016-10-07 00:02:33
只是想給你另一個可能的解決方案。 我把它放在一個單獨的答案中，因為它是一個不同的想法。
基本上，每次單擊鏈接時，您都可以使用 javascript 來觸發 ajax 請求。 該請求將返回將插入到頁面中的 HTML 內容。 這是一個演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<ul id="nav">
<li><a target="#" href="page1.html">Tab1</a></li>
<li><a target="#" href="page2.html">Tab2</a></li>
<li><a target="#" href="page3.html">Tab3</a></li>
</ul>
<div id="pageContent">
</div>
</body>
<script type="text/javascript">
$("#nav li a").click(function() {
$("#pageContent").load($(this).attr('href'));
return false;
});
</script>
</html>
注意我使用的是 jQuery，因為它使它更容易，但如果你想使用不同的庫或只是 vanilla javascript，想法是一樣的。 基本上它將回調函數附加到鏈接的單擊事件，該函數調用 jQuery 的load函數來獲取頁面的內容並將其插入到 div 中。 我認為這種方法更常見，你可以在很多流行的網站上找到它。
如何制作居中的導航欄HTML CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.