分享一个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实现的动态内容标签页切换效果教程