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/

如何在点击锚点之前显示第一个div？
如果我将锚点更改为其他内容（即＃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;
}

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

Answer 2

这是一项有趣的挑战。不幸的是，我不相信用CSS（纯粹）可以实现预期的结果。

我们可以使用以下方式轻松展示第一个div：

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

但我不知道如何在不使用JavaScript的情况下选择我们之前的:target ed div。

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

$('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/

Answer 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的任务。你需要添加的东西远非语义正确......

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

3 个答案: