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 ...
随机推荐
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划查询(Ⅷ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排>,主要介绍整个施工计划列表与编辑界面. 下面看看施工计划查询(ⅠⅡⅢ ⅣⅤⅥ Ⅶ Ⅷ) 一.施工计划查询 ...
- [Bhatia.Matrix Analysis.Solutions to Exercises and Problems]ExI.2.6
If $\sen{A}<1$, then $I-A$ is invertible, and $$\bex (I-A)^{-1}=I+A+A^2+\cdots, \eex$$ aa converg ...
- Tourism Planning（HDU 4049状压dp）
题意:n个朋友去游览m个城市,给出每个人对每个城市的兴趣值,和每人去每个城市的花费,如果两人在一个城市有一个价值,若多于2人这这个价值是任意两人产生价值的总和.在去每个城市的过程中人可以随便离开,也可 ...
- 【Kafka入门】Kafka基础结构和知识
基本概念的总结 在基本的Kafka架构中,producer将消息发布到Kafka话题中,一个Kafka话题通常指消息的类别或者名称,Kafka话题被集群中一个充当Kafka server角色的 bro ...
- 使用Intent在活动之间穿梭（《第一行代码》读书笔记）
以下全是个人理解//瞎扯 其实活动理解理解起来就像一个个函数 那么Intent就是调用函数和参数传递 可以有无参,仅仅是调用 Intent intent = new Intent(A.this, B. ...
- HDU 5710 Digit-Sum （构造）
题意: 定义S(N) 为数字N每个位上数字的和.在给两个数a,b,求最小的正整数n,使得 a×S(n)=b×S(2n). 官方题解: 这道题目的结果可能非常大,所以我们直接枚举n是要GG的. 首先可以 ...
- 纯CSS完美实现垂直水平居中的6种方式
前言 由于HTML语言的定位问题,在网页中实现居中也不是如word中那么简单,尤其在内容样式多变,内容宽高不定的情况下,要实现合理的居中也是颇考验工程师经验的.网上讲居中的文章很多,但是都不太完整,所 ...
- iOS CAShapeLayer精讲
前言 CAShapeLayer继承自CALayer,因此,可使用CALayer的所有属性.但是,CAShapeLayer需要和贝塞尔曲线配合使用才有意义. 关于UIBezierPath,请阅读文章:i ...
- Qt on_pushButton_clicked()的用法【worldsing笔记】
在Qt里按钮控件默认对应一个on_pushButton_clicked()成员,如果想用点击信号,在代码中实现on_pushButton_clicked()成员即可. 最近看了一段代码,里面并没有co ...
- 【Linux】多睡/少睡一小时！冬夏令时全解析
多伦多2016年11月6日凌晨2点开始起时间调回一小时,时间到凌晨2点时自动跳回到1点,大家可以多睡一小时(或者多一小时写essay的时间)~ 多伦多2017年3月12日凌晨2点开始时间拨快一小时时间 ...