分享一个CSS3实现的动态内容标签页切换效果教程

日期：2012-4-14 来源：GBin1.com



在线演示

本地下载

在这篇教程中，我们将学习如何使用CSS3来实现一个动态的标签页切换效果。希望大家喜欢。

内容标签页在网站或者web开发中经常使用到，它对于帮助我们美化页面非常的实用。这个教程中我们将使用radio button和:checked伪类和sibling组合来实现一个CSS3内容标签页。

注意目前并不是所有的浏览器都支持CSS3。

HTML标签

这里我们使用input元素来生成内容切换操作元素，并且使用label元素来生成标签页内容：

<section class="tabs">
<input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
<label for="tab-1" class="tab-label-1">About us</label>

<input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
<label for="tab-2" class="tab-label-2">How we work</label>

<input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
<label for="tab-3" class="tab-label-3">References</label>

<input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
<label for="tab-4" class="tab-label-4">Contact us</label>

<div class="clear-shadow"></div>

<div class="content">
<div class="content-1">
<p>Some content</p>
</div>
<div class="content-2">
<p>Some content</p>
</div>
<div class="content-3">
<p>Some content</p>
</div>
<div class="content-4">
<p>Some content</p>
</div>
</div>
</section>

每一个input元素都包含一个数值，我们可以通过checked属性添加缺省的值。

...

来源：分享一个CSS3实现的动态内容标签页切换效果教程