0

好吧...我知道那里已经有很多纯 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？
  2. 即使我将锚点更改为其他内容（即#tabPage4）...如果这有意义，我如何让它离开显示的 div...显示？
4

3 回答 3

0

在加载时显示第一个选项卡应该不难。您可以使用: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 的任务。此外，您需要添加的东西在语义上远非正确......

于 2013-10-31T23:45:45.600 回答
0

从这里，您可以像这样将最后一个显示在开头（工作示例）

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

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

于 2013-10-31T23:24:37.163 回答
0

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

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

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

但是我不知道有一种方法可以在不使用 JavaScript 的情况下选择我们以前的:targeted 。div

在这里，我设置了一些 jQuery 以将类.active应用于任何divid 等于单击的锚 href 的 id。从那里我们可以使用一些简单的 CSS 覆盖该类的 s 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/

于 2013-10-31T23:31:32.177 回答