css - 来自固定 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

示例 fiddle :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;
}