純CSS完成tab實現5種不同切換對應內容效果

 

 

很常用的一款特效純CSS完成tab實現5種不同切換對應內容效果

實例預覽

下載地址

實例代碼

 

<div class="main">
                <ul class="tabs">
                    <li>
                        <input type="radio" checked name="tabs" id="tab1">
                        <label for="tab1">tab 1</label>
                        <div id="tab-content1" class="tab-content animated fadeIn">
                            <a href='#'>jQuery+jRange數值范圍選擇控件_鼠標拖動數值范圍</a>
                            <p>本文用兩個例子向大家介紹一款范圍選擇器插件jRange。</p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab2">
                        <label for="tab2">tab 2</label>
                        <div id="tab-content2" class="tab-content animated fadeIn">
                            <a href='#'>jquery下利用jsonp跨域訪問實現方法</a>
                            <p>本文將給您介紹如何使用getJSON來實現異步跨域提交表單。</p>
                        </div>
                    </li>
                    <li>
                        <input type="radio" checked name="tabs" id="tab3">
                        <label for="tab3">tab 3</label>
                        <div id="tab-content3" class="tab-content animated fadeIn">
                            <a href='#'>Flowplayer簡單酷炫的視頻播放器</a>
                            <p>Flowplayer是一款免費的WEB視頻播放器。它支持播放flv、swf等流媒體和圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴展。</p>
                        </div>
                    </li>
                </ul>
            </div>