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

【问题标题】：CSS Tab Control - How do I show only the first div?CSS 选项卡控件 - 如何仅显示第一个 div？
【发布时间】：2013-11-01 08:07:29
【问题描述】：

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

如何让它在单击锚点之前显示第一个 div？
如何让它保持显示的 div...显示，即使我将锚点更改为其他内容（即 #tabPage4）...如果有意义？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

从here，你可以让最后一个显示在开头这样（working example）

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

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

【讨论】：

【解决方案2】：

这是一个有趣的挑战。不幸的是，我不相信（纯粹）使用 CSS 可以达到预期的结果。

我们可以很容易地显示第一个div：

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

但我不知道如何在不使用 JavaScript 的情况下选择我们以前的 :targeted divs。

在这里，我设置了一些 jQuery 以在任何 div 上应用类 .active，其 id 等于单击的锚点 href 的 id。从那里我们可以使用一些简单的 CSS 覆盖该类的 divs 上的 display: none;：

$('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; }

还有一个工作示例：http://jsfiddle.net/fjKUw/1/

【讨论】：

【解决方案3】：

在加载时显示第一个标签应该不难。您可以使用:first-of-type 伪类。像这样的：

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

第二个问题有点难。只要您的目标移动到选项卡外的锚点，第一个选项卡就会再次显示。 http://jsfiddle.net/rcrdC/4/ 你需要一些方法来保存状态。正如@StuartKershaw 已经建议的那样，“现实生活”的解决方案是添加几行javascript来实现这一点。

如果您坚持完全使用 css，您可以使用（隐藏的）单选按钮来保留状态。这有点 hacky（输入不是为了那个），你必须稍微改变你的标记，但它应该是可行的。

我的意思的一个例子可以在这里找到：http://jsfiddle.net/rcrdC/5/

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

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

【讨论】：