javascript - CSS Tab 控件 - 如何只显示第一个 div？

Question

好吧...我知道那里已经有很多纯 CSS 选项卡控件...

这是我的 HTML

<div class="tabs">
    <ul>
    <li><a href="#tabPage1">One</a></li>
    <li><a href="#tabPage2">Two</a></li>
    <li><a href="#tabPage3">Three</a></li>
    </ul>
    <div id="tabPage1">
    <p>
        Hello World
    </p>
    </div>
    <div id="tabPage2">
    <p>
        Goodbye World
    </p>
    </div>
    <div id="tabPage3">
    <p>
        Another World, somewhere far, far away!
    </p>
    </div>
</div>

这是我的 CSS

.tabs > div {
    display: none;
}

.tabs > div:target {
    display: block;
}

这个例子没有样式，因为我只关心行为。

您可以在这里尝试... http://jsfiddle.net/rcrdC/

1. 如何让它显示第一个 div，直到单击 anchor ？
2. 即使我将 anchor 更改为其他内容(即#tabPage4)，我如何让它保留显示的 div...显示...是否有意义？

Answer 1

来自 here , 你可以让最后一个显示在开头这样 ( working example )

.tabs > div:target ~  div:last-child,
.tabs > div{
    display: none;
}
.tabs div:last-of-type,
.tabs > div:target {
    display: block;
}

只需将第一个标签页移动到最后一个。