仅使用 CSS 的 HTML 选项卡界面

Question

是否可以只使用 css 而不使用 javascript 创建一个选项卡式界面？我的意思是能够使用 css/html 切换选项卡，而无需 javascript。也许使用 CSS 3.0？

标记类似于:

<ul>
 <li><a href="#tab1">tab 1</a></li>
 <li><a href="#tab2">tab 2</a></li>
 <li><a href="#tab3">tab 3</a></li>
</ul>

<div id="tab1"> ...1... </div>
<div id="tab2"> ...2... </div>
<div id="tab3"> ...3... </div>

Answer 1

:target 通常是制表符的首选方式。

您还可以巧妙地使用 input:radio 或 input:checkbox 元素。

http://jsfiddle.net/nzYnc/

HTML:

<label for="one">One</label>
<label for="two">Two</label>
<label for="three">Three</label>

<input type="radio" id="one" name="tab" checked="checked" />
<div>
    First content
</div>
<input type="radio" id="two" name="tab" />
<div>
    Second content
</div>
<input type="radio" id="three" name="tab" />
<div>
    Third content
</div>

CSS:

input
{
    position: absolute;
    right: 100%;
}

input:checked + div
{
    display: block;
}
div
{
    display: none;
}

以巧妙的方式使用下一个兄弟 (+) 和 :checked 选择器可以让您做一个纯 CSS Accordion 、可切换列表或类似这样的选项卡。