CSS3——选项卡切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab Switch</title>
<link rel="stylesheet" href="stylesheet/tabSwitch.css">
</head>
<body>
<ul>
<li>
<input type="radio" id="radio1" name="tabs" checked>
<label for="radio1">选项卡1</label>
<div class="tabs-content" id="content1">1</div>
</li>
<li>
<input type="radio" id="radio2" name="tabs">
<label for="radio2">选项卡2</label>
<div class="tabs-content" id="content2">2</div>
</li>
</ul>
</body>
</html>
*{
margin:;
padding:;
list-style-type: none;
}
ul{
margin:200px auto;
width: 500px;
position: relative;
}
li{
float: left;
}
input[type="radio"]{
position: absolute;
left: -999em;
}
label{
display: block;
cursor: pointer;
line-height: 50px;
font-size: 20px;
font-family: 微软雅黑;
width: 80px;
padding-top: 10px;
padding-bottom: 10px;
background-color: aqua;
border-radius: 8px 8px 0 0;
transition: all 0.2s linear;
}
div{
top:70px;
left:;
position: absolute;
width: 500px;
height: 300px;
background-color: aqua;
}
input[type="radio"]:checked~label{
background-color: cadetblue;
padding-top: 12px;
}
input[type="radio"]:checked~div {
z-index:;
}
CSS3——选项卡切换的更多相关文章
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果
利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼 ...
- Android ViewPager实现选项卡切换
ViewPager实现选项卡切换,效果图如下: 步骤一:这里使用兼容低版本的v4包进行布局,这里eclipse没有输入提示,所以要手动输入,文件名称“activity_main.xml” <Re ...
- 7、JavaScript总结——实现选项卡切换的效果
编程挑战 现在利用之前我们学过的JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 ...
- 基于jquery左侧带选项卡切换的焦点图
今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class ...
- 用js实现选项卡切换效果
这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --><ul class="tab_menu"> <li class=&quo ...
- 常用js效果：选项卡切换
js选项卡,很多网站都会用到,我这里用jquery给整了一个简单但是却很实用的js选项卡,废话不多说,直接上代码: <style> .txtadsblk01{ width:200px;} ...
- jquery Tabs选项卡切换
效果: HTML部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
随机推荐
- Linux 下操作gpio（两种方法，驱动和mmap）
目前我所知道的在linux下操作GPIO有两种方法: 1． 编写驱动,这当然要熟悉linux下驱动的编写方法和技巧,在驱动里可以使用ioremap函数获得GPIO物理基地址指针,然后使用这个指针根据 ...
- MySQL 视图知识点小结
视图本身是一个虚拟表,不存放任何数据.在使用SQL语句访问视图的时候,它返回的数据是MySQL从其他表中生成的.视图和表在同一个命名空间, MySQL在很多地方对于视图和表是同样对待的.不过视图和表也 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.5.5
Show that the inner product $$\bex \sef{x_1\vee \cdots \vee x_k,y_1\vee \cdots\vee y_k} \eex$$ is eq ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.4.4
(1). There is a natural isomorphism between the spaces $\scrH\otimes \scrH^*$ and $\scrL(\scrH,\scrK ...
- HDU 5699 货物运输 二分判定
转自:http://blog.csdn.net/jtjy568805874/article/details/51480479 #include <cstdio> #include < ...
- 430的启动，I/O中断
感言:看了这一集MSP430的讲解之后,我才知道msp430真的和arm7没什么区别了,可能在某些功能上要比arm7要优秀 1:430的系统复位和初始化初始化 430的系统复位有两个来源 1:POR上 ...
- 了解 MVC 应用程序执行过程
发送给基于 ASP.NET MVC 的 Web 应用程序的请求首先通过 UrlRoutingModule 对象(一个 HTTP 模块)进行传递. 此模块将分析请求并执行路由选择. UrlRouting ...
- 欢迎来到Googny的博客
本博客主要分享笔者的学习知识,以及工程中遇到的技术问题. 由于笔者技术水平有限,博客不足之处在所难免,还请各位网友不吝交流,共同进步. 一起体会分享的乐趣. JavaScript 部分 该部分深入浅出 ...
- hdu 5585 Numbers【大数+同余定理】
Numbers Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- hdu 1597 find the nth digit
find the nth digit Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...