码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-19 02:52:48      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:asc   index   例子   定义   query   范围   支持   内容   播放flv   

 很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果

实例预览

下载地址

实例代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

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

标签:asc   index   例子   定义   query   范围   支持   内容   播放flv   

原文地址:http://www.cnblogs.com/LiuWeiLong/p/6079432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!