Javascript CSS选项卡控件-如何仅显示第一个div？

好的…我知道已经有很多纯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>

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

你可以在这里试试

如何让它显示第一个div，直到单击锚？ 我如何让它保持显示的div…显示，即使我将锚点更改为其他内容，如tabPage4…如果这有意义的话？ 从中，可以使最后一个在开始时显示，如下所示

---

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

这是一个有趣的挑战。不幸的是，我不相信纯粹用CSS就能达到预期的效果

我们可以使用以下工具轻松显示第一个div：

div:first-of-type { display: block; }

但我不知道有什么方法可以选择我们以前的版本：不使用JavaScript的目标div

在这里，我设置了一些jQuery来应用class.active在任何id等于单击的锚href的div上。从那里我们可以覆盖显示：无；在该类的div上使用一些简单的CSS：

$('li a').each(function () {
    $(this).click(function () {
        var active = $(this).attr('href');
        $(active).addClass('active');
    });
});

下面是相关的CSS：

div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }

---

还有一个工作示例：

显示加载时的第一个选项卡应该没有那么难。您可以使用pseudo类的：first类型。大概是这样的：

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

第二个问题有点难。当目标移动到选项卡外的锚点时，第一个选项卡将再次显示。你需要一些方法来保持状态。“现实生活”的解决方案是添加几行javascript来实现这一点，正如@StuartKershaw所建议的那样

如果你坚持完全使用css，你可以使用一个隐藏的单选按钮来保存状态。这是一个有点黑客的输入不是为了那个，你们将不得不改变你们的标记一点，但它应该是可行的

我的意思可以在这里找到一个例子：

注意，我在选项卡之间放置了一些隐藏的单选按钮。我将标签的链接替换为引用这些收音机的标签。然后，我使用：checked和+选择器的组合使事情正常进行。加载时可见的选项卡是具有选中属性的选项卡

同样，这不是我推荐的方式。您添加标记的唯一目的是实现特定的布局，这应该是css的任务。此外，您需要添加的内容在语义上远远不正确

div:first-of-type, div:target { display: block; }
div { display: none; }
.active { display: block; }

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