css - 渐进增强的标签式导航。 (仅使用 css)

Question

我计划在我正在设计的网站上制作标签式导航。 最初，您可以在 javascript 中创建它。但是，如果有人在关闭 Javascript 的情况下浏览网页。然后他们将看不到其他选项卡指向的链接。

希望你能给我一些建议。 在这个网站上(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>

Answer 1

几个月前我做了类似的事情......

http://lloydsbankinggroupapprentices.com/

查看主页上的“品牌”部分。

关闭 JS 后， anchor 上的 href 实质上将内容拉入 View 。我前段时间在 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;

这是一个 JS fiddle ，显示纯 css 选项卡式内容。

http://jsfiddle.net/danvoyce/DUL6N/

如果您有任何疑问，请告诉我们!