仅使用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;
}

以巧妙的方式使用next-sibling(+)和:checked选择器可以让你做一个纯CSS手风琴,可切换列表或像这样的标签.