我正在計劃在我正在設計的網站上製作標籤導航。 最初，你可以在javascript中創建它。但是，如果有人瀏覽網頁關閉了JavaScript。然後他們將看不到其他標籤指向的鏈接。漸進式增強標籤式導航。 （只使用CSS）
希望你能給我這個提示。 在這個網站（stackoverflow）。我試過JS禁用的標籤導航，但標籤導航的作品。任何提示，我如何能實現這一點。
<ul class="tabbed-nav">
<li><a href="#section1">Tab 1</a></li>
</ul>
<div class="tabbed-content">
<div id="section1">I'm tab1</div>
</div>
有了像jQuery這樣的工具，實現這是最簡單的任務。
檢查這個JS提琴： http://jsfiddle.net/sqfSA/
另外，看到這個頁面的標籤UI功能： http://jqueryui.com/tabs/
直HTML用於與CSS正常，然後JS用於隱藏/顯示選項卡。如果JS已禁用，則會生成可見數據。
希望有所幫助。
全部代碼，因爲堆棧溢出需要它（您可以複製並粘貼到自己的應用程序，看看它的工作）：
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/tabs/resources/demos/style.css" />
<script>
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
</body>
</html>
我做了一個類似幾個月前的東西...
http://lloydsbankinggroupapprentices.com/
查看主頁上的「品牌」部分。
在JS關閉的情況下，錨點上的href實質上將內容拉入視圖。我前段時間在csstricks上看到的很好的小動作。雖然..現在找不到頁面？
的CSS很簡單：
.tabbed-nav li a{
display: block;
padding: 3px 10px;
margin-right: 1px;
background: #666;
color: #fff;
}
.tabbed-content{
position: absolute;
top: 35px;
height: 100px;
overflow: hidden;
width: 100%;
}
.tabbed-content div{
position: relative;
height: 100px;
width: 300px;
}
而這裏的展示純CSS標籤式內容的JS小提琴。
http://jsfiddle.net/danvoyce/DUL6N/
給我們留言，如果您有任何疑問！
由於標籤的界面依賴於jQuery UI，我認爲設計會中斷。 – chanHXC 2013-02-19 03:38:43
@chanHXC它會如何「破」？對不起，我不理解你的評論。我的解決方案使用了jQuery，而jQuery則需要jQuery UI來提供像選項卡這樣的界面元素。它的工作原理完全像海報所描述的那樣。 – 2013-02-19 10:41:11
我的意思是，如果Javascript被禁用，設計可能會中斷，因爲它依賴於jQuery和jQueryUI。 雖然我還沒有試過jQueryUI。 – chanHXC 2013-02-19 14:49:05