纯CSS完成tab实现5种不同切换对应内容效果

2016-11-18 11:25:35来源:cnblogs.com作者:285267128人点击

第七城市

 

 

很常用的一款特效纯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>

  

 

 

第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台