很常用的一款特效纯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种不同切换对应内容效果的更多相关文章

  1. 利用target的特性,可以实现纯css的tab效果切换

    基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...

  2. CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  3. 纯CSS实现tab选项卡切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta cont ...

  4. 纯css实现tab导航

    仿照这个 实现了一个纯css的导航功能 html <div class="main"> <div id="contain1">列表一内容 ...

  5. 教你两招用纯CSS写Tab切换

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换. 而今天所要分享的,是使用 0 行JS代码来实现Tab切换! 具体效果如下:   Tab切换 方法一:模 ...

  6. 纯CSS实现垂直居中的7种方法

    今天申请博客通过了,给大家讲讲我所看到过的纯css实现垂直居中的各种方法.为什么要把它作为第一篇文章呢?因为这是我刚开始接触前端学到的对我最有用的知识,希望大家也可以从中获益! 在CSS中实现水平居中 ...

  7. 纯css就能实现可点击切换的轮播图,feel起来很丝滑

    前言 轮播图经常会在项目里用到,但是实际上用到的轮播图都是比较简单的,没有复杂的特效,这个时候如果去引入swiper那些库的话,未免就有点杀鸡焉用牛刀了. 所以不如自己手写一个,而今天我要分享的一种写 ...

  8. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

  9. 史上最牛逼的纯CSS实现tab选项卡,闪瞎你的狗眼

    下载地址:http://download.csdn.net/detail/cometwo/9393614 html文件 <!DOCTYPE html> <html> <h ...

随机推荐

  1. 树莓派系统介绍:DIetPi

    项目主页:http://fuzon.co.uk/phpbb/viewtopic.php?f=8&t=6 当前版本:V34(15年4月16日发布) DietPi是国外一个基于Raspbian的精 ...

  2. zabbix注入过程分析

    Zabbix jsrpc.php sql 注入过程分析 漏洞公开详情(https://support.zabbix.com/browse/ZBX-11023)中提示在insertDB() 中的inse ...

  3. tomcat共享lib里面的jar包

    参考:http://shitouququ.blog.51cto.com/24569/1255094 1.在tomcat根目录下新建shared/lib目录结构,将项目的jar包放在此目录下,记得将项目 ...

  4. Linux命令--删除软连接

    1,建立软链接 ln -s 源文件 目标文件 例如:ln -s /usr/hb/ /home/hb_link 2,删除软链接 正确的是:rm -rf hb_link 错误的是:rm -rf hb_li ...

  5. 大熊君学习html5系列之------Online && Offline(在线状态检测)

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  6. FindWindowEx用法

    函数原型:HWND FindWindowEx(HWND hwndParent,HWND hwndChildAfter,LPCTSTR lpszClass,LPCTSTR lpszWindow): 参数 ...

  7. GenomicRangeQuery /codility/ preFix sums

    首先上题目: A DNA sequence can be represented as a string consisting of the letters A, C, G and T, which ...

  8. Xshell个性化设置,解决Xshell遇到中文显示乱码的问题

    在同事的推荐下,今天开始使用Xshell连接Linux,但是发现一个“遇到中文显示乱码”的问题, 同事的解决方案如下: 平常给Linux上传文件之前,先把文件转换成UTF-8编码形式, 然后设置Xsh ...

  9. C和指针 第三章 指针常量与常量指针

    c语言中声明常量的两种方式 const int value int const value 如果要声明常量的指针,即指向常量的指针,则可以参考上面的常量声明修改一下 const int *ptr in ...

  10. MySQL 常用SQL技巧和常见问题

    一.巧用正则表达式 二.巧用RAND() 提取随机行 利用rand() 的随机数功能,结合 order by 子句完成随机抽取某些行的功能. 三.利用 group by 的 with rollup 子 ...