分享一個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實現的動態內容標籤頁切換效果教程