CSS3属性之 target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>target伪类实现Tab切换效果</title>
<style type="text/css">
p{
bond:li;
}
.tablist {
position:relative;
margin:50px auto;
min-height:200px;
}
/* this example style begin */
.tab_content {
position: absolute;/*set content box as absolute*/ width:600px;
height:170px;
padding:15px;
border:1px solid #91a7b4;
border-radius:3px;
box-shadow: 2px 3px rgba(,,,0.1);
font-size:.2em;
line-height:.5em;
color:#;background:#fff;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: ;
}
.tabmenu {
position:absolute;
top:%;
margin:;
}
.tabmenu li{
display:inline-block;}
.tabmenu li a {
display:block;
padding:5px 10px;
margin: 10px ;
border:1px solid #91a7b4;
border-radius: 5px 5px;
background:#e3f1f8;
color:#;
text-decoration:none;
}
.tablist {
position:relative;
margin:50px auto;
min-height:200px;
} </style>
</head>
<body>
<p>target伪类实现Tab切换效果</p>
<div class="tablist">
<ul class="tabmenu">
<li><a href="#tab1">标签一</a></li>
<li><a href="#tab2">标签二</a></li>
<li><a href="#tab3">标签三</a></li>
</ul>
<div id="tab1" class="tab_content">
<p>假如生活欺骗了你</p>不要悲伤，不要哭泣<br />快乐的日子总会来的
</div>
<div id="tab2" class="tab_content">
犯我中华着，虽远必诛!
</div>
<div id="tab3" class="tab_content">
<p style="font-size:24px;">你在桥上看风景</p>
<p>看风景的人正在看你</p>
</div>
</div>
</body>
</html>
效果：
点击标签1
点击标签2
点击标签3
CSS3属性之 target伪类实现Tab切换效果的更多相关文章
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- CSS3 :target伪类实现Tab切换效果
用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- :target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...
- 第91天：CSS3 属性选择器、伪类选择器和伪元素选择器
一.属性选择器 其特点是通过属性来选择元素,具体有以下5种形式: 1.E[attr] 表示存在attr属性即可: div[class] 2.E[attr=val] 表示属性值完全等于val: ...
- CSS3 :target伪类的理解与使用
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...
- CSS3 target 伪类不得不说那些事儿（纯CSS实现tab切换）
是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...
- CSS3 target 选择器_:target伪类的使用
target作为目标伪类选择器,是css3中的新特性之一,目前已经支持所有主流浏览器,除了 IE8 及更早的版本.target伪类的主要是用于匹配文档中uri中某个标志符的目标元素,具体来说,uri中 ...
- 巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
随机推荐
- 前端开发学习笔记 - 1. Node.JS安装笔记
Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...
- 关于跨域踩的坑，浏览器 status code为200，但实际上是跨域了
背景 后端使用Nginx并更改本地host文件,起本地服务.将aaa.bbbb.com代理至本地IP地址(10.26.36.156).使用$.ajax调用后端restful接口,要求content-t ...
- 基于Anaconda安装Tensorflow 并实现在Spyder中的应用
基于Anaconda安装Tensorflow 并实现在Spyder中的应用 Anaconda可隔离管理多个环境,互不影响.这里,在anaconda中安装最新的python3.6.5 版本. 一.安装 ...
- 大牛整理最全Python零基础入门学习资料
大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』 帖子类别:『人工智能』 阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...
- ora600
4节点RAC:版本oracle11.2.0.4 22:20——23:40发生ora600 alert日志: Errors in file /u01/app/oracle/diag/rdbms/orcl ...
- java设置RabbitMQ的消费处理出现：ConditionalRejectingErrorHandler : Execution of Rabbit message listener failed.
WARN 7868 --- [cTaskExecutor-1] s.a.r.l.ConditionalRejectingErrorHandler : Execution of Rabbit messa ...
- 16/7/7_PHP-构造\解析函数
昨天又问老师问题,老师还是强调要用博客之类记录下每天的学习的习惯. 我个人的想法是一些知识点不用笔记一下 在脑海的理解不是太深.但是老师都这么说了我老师乖乖的记录下今天的学习的一些知识.心得.技巧等等 ...
- python_001
一.python开发1.python基础 -基础 -基本数据类型 -函数 -面向对象2.网络编程3.web框架 -用于写网站4.设计模式 + 算法
- Java基础/利用fastjson反序列化json为对象和对象数组
利用fastjson反序列化json为对象和对象数组 利用 fastjosn 将 .json文件 反序列化为 java.class 和 java.util.List fastjson 是一个性能很好的 ...
- 前端 CSS的继承性
css有两大特性:继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性,这就是我们的css中的继承. 记住:有一些属性是可以继承下来 : color . font-*. text- ...