来自固定HTML的纯CSS选项卡内容

Question

我有一些固定HTML的标签，用于jquery，但我需要一个纯css修复，如果可能的话，可以在eBay上显示（客户希望复制HTML内容而不改变）。

所以我希望默认情况下打开第一个选项卡式内容，其余部分隐藏，直到单击相应的菜单项（切换内容）。

<div id="tabs">

    <ul>
        <li><a href="#tabs-1">First</a></li>
        <li><a href="#tabs-2">Second</a></li>
        <li><a href="#tabs-3">Third</a></li>
        <li><a href="#tabs-4">Fourth</a></li>
    </ul>

    <div id="tabs-1">
        <p>First content</p>
    </div>

    <div id="tabs-2">
        <p>Second content</p>
    </div>

    <div id="tabs-3">
        <p>Third content</p>
    </div>

    <div id="tabs-4">
        <p>Fourth content</p>
    </div>

</div>

我似乎无法找到一个css解决方案，所以把它交给你，例如下面的jsfiddle。

http://jsfiddle.net/c3hgy5v2/

Answer 1

您可以使用:target选择器定位相关标签并显示/隐藏：

  

:target伪类表示唯一元素（如果有）   一个id匹配文档URI的片段标识符..

Demo Fiddle

#tabs ul li {
    display:inline-block;
}
#tabs div {
    display:none;
}
#tabs div:target {
    display:block;
}

Answer 2

示例小提琴：http://jsfiddle.net/c3hgy5v2/1/

使用:target伪类，您可以显示所选标签，最终显示基本的css过渡（例如应用于opacity）

相关CSS

#tabs {
    position: relative;
}

#tabs div {
    opacity: 0;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s;
    position: absolute;
    left: 0;
}

#tabs div:target {
   opacity: 1;
}