利用CSS3:checked选择器和~配合实现tab切换

效果:

代码:

<style>
body,div,input,label{
margin:0;
padding:0;
}
#tab>input{
opacity:0;
position:absolute;
left:0;
top:0;
}
#tab .label{
overflow:hidden;
}
#tab .label>label{
float:left;
width:100px;
height:30px;
line-height:30px;
border:1px solid #dedede;
text-align:center;
margin-left:-1px;
}
.content li{
display:none;
} input:nth-of-type(1):checked~.label>label:nth-of-type(1){
background-color:red;
color:#fff;
}
input:nth-of-type(2):checked~.label>label:nth-of-type(2){
background-color:red;
color:#fff;
}
input:nth-of-type(3):checked~.label>label:nth-of-type(3){
background-color:red;
color:#fff;
}
input:nth-of-type(1):checked~.content li:nth-of-type(1){
display:block;
}
input:nth-of-type(2):checked~.content li:nth-of-type(2){
display:block;
}
input:nth-of-type(3):checked~.content li:nth-of-type(3){
display:block;
}
</style>
<div id="tab">
<input checked type="radio" name="name" id="name1">
<input type="radio" name="name" id="name2">
<input type="radio" name="name" id="name3">
<div class="label">
<label for="name1">选择1</label>
<label for="name2">选择2</label>
<label for="name3">选择3</label>
</div>
<div class="content">
<ul>
<li>内容1内容内容1内容1</li>
<li>内容2内容内容2内容2</li>
<li>内容3内容内容3内容3</li>
</ul>
</div>
</div>

原理就是点击label的时候就会选中input标签,然后通过CSS让当前选中的那个元素的对应内容显示就好了。

利用:target实现遮罩层效果

单击按钮的时候会弹出遮罩层,如果再点遮罩层的话就会把遮罩层给隐藏。



代码:

<style>
#show{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
display:none;
}
a[href="#hide"]{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
#hide:target{
display:none;
}
#show:target{
display:block;
}
</style> <a href="#show">显示</a>
<div id="hide">
<div id="show">
<a href="#hide"></a>
</div>
</div>

长期更新...

纯CSS实现JS效果研究的更多相关文章

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

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

  2. 纯 CSS 实现波浪效果!

    一直以来,使用纯 CSS 实现波浪效果都是十分困难的. 因为实现波浪的曲线需要借助贝塞尔曲线. 而使用纯 CSS 的方式,实现贝塞尔曲线,额,暂时是没有很好的方法. 当然,借助其他力量(SVG.CAN ...

  3. 纯css、js 的H5页面对接echarts

    做项目时,会遇到一些零碎的技术点.记录下来以防忘记 需求:做可视化界面,但是需要兼容ie8,需要用纯css.js 的H5页面对接echarts,下面为效果图(带定时器循环显示tooltip). 实现方 ...

  4. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  5. 纯css实现幻灯片效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  6. 纯css做幻灯片效果

    css3里面有一个@keyframes动画功能. w3c上面的例子: 可以使用它来做一个幻灯片效果. <!DOCTYPE html> <html lang="en" ...

  7. 各种轮播实现(纯css实现+js实现)

    1.纯Css实现轮播效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  8. IE7,8纯css实现圆角效果

    众所周知,IE7,8不支持border-radius效果.但我们同样有办法用css实现这个效果,方法就是用border来模拟. <!DOCTYPE html> <html lang= ...

  9. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

随机推荐

  1. (转)CentOs上配置samba服务

    前 言 在我们使用 Windows 作为客户机的时候,通常有文件.打印共享的需求.作为Windows 网络功能之一,通常可以在 Windows 客户机之间通过 Windows Network 固有的功 ...

  2. hdu acm 1166 敌兵布阵 (线段树)

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  3. C#的对象赋值

    例如 Class A {       int x = 0;       int y = 0; }   public void test() {       A test1 = new A( );   ...

  4. ruby中数组的常用方法----例子

    #初始化 a = Array.new p a #=>[] a = Array.new(5) p a #=>[nil, nil, nil, nil, nil] a = Array.new(5 ...

  5. iOS开发零基础--Swift教程 字典

    字典的介绍 字典允许按照某个键来访问元素 字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合 键集合是不能有重复元素的,而值集合是可以重复的,键和值是成对出现的 Swift中 ...

  6. java 内存机制

    1.Java的内存机制 Java 把内存划分成两种:一种是栈内存,另一种是堆内存.在函数中定义的一些基本类型的变量和对象的引用变量都是在函数的栈内存中分配,当在一段代码块定义一个变量时,Java 就在 ...

  7. (转)Unity AssetBundle爬坑手记

    转自:http://www.cnblogs.com/ybgame/p/3973177.html 这篇文章从AssetBundle的打包,使用,管理以及内存占用各个方面进行了比较全面的分析,对Asset ...

  8. linux-15基础命令之-用户与用户组(useradd,userdel,usermod,passwd,groupadd)

    1.useradd 命令用于创建新的用户,格式为:useradd[选项] 用户名 useradd参数 参数 作用 -d 指定用户的家目录(默认/home/username) -D 展示默认值 -e 帐 ...

  9. linux-11 基本命令之 -工作期目录切换命令-pwd,cd,

    pwd 命令用于显示当前的工作目录,格式为:pwd[选项] @1.查看当前的工作路径: [root@localhost /]# pwd cd 命令用于切换工作路径 格式为:"cd 目录名称& ...

  10. input只读属性区别

    readonly disabled 相同点:都是禁止输入 不同点:readonly属性会把该input提交到form表单 disabled属性不会把该input提交到form表单