:target伪类制作tab选项卡
:target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子:
HTML代码:
<div>
<a href="#demo1">点击此处</a>
</div>
<div id="demo1">测试结果</div>
CSS代码:
:target{
color: #343434;
border: 1px solid red;
background-color: red;
}
#demo1写在链接里,表示指向一个目标元素,而id=demo1的div元素即是想要选中的目标元素。这段代码操作后的效果为:
点击a元素之后,目标元素#demo1的样式发生了变化,变化的样式即css代码所写的。
:target是css3新增的属性,目前最常用到的地方便是tab选项卡制作。
以前的tab选项卡一般运用js或者jquery来实现,现在只要用css3的:target便可以完成。
代码示例:
HTML代码:
<ul class="tab-title">
<li><a href="#music">音乐</a></li>
<li><a href="#fun">娱乐</a></li>
<li><a href="#photo">摄影</a></li>
</ul>
<div id="music">音乐</div>
<div id="fun">娱乐</div>
<div id="photo">摄影</div>
CSS代码:
ul{
width: 303px;
height: 40px;
text-align: center;
line-height: 40px;
list-style: none;
border: 1px solid #333;
margin: 40px auto 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
li{
float: left;
width: 100px;
border-right: 1px solid #333;
display: table;
}
li:nth-child(3){
border: none;
}
li > a {
color: #333;
text-decoration: none;
display: table-cell;
vertical-align: middle;
}
li:nth-child(1) > a{
border-top-left-radius: 10px;
}
li:nth-child(3) > a{
border-top-right-radius: 10px;
}
li > a:hover {
background-color: #8BB7F9;
}
div{
position: absolute; 必须
left: 161px;
width: 303px;
height: 150px;
line-height: 150px;
text-align: center;
border: 1px solid #333;
border-top: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #fff;
}
#music:target,#fun:target,#photo:target{
z-index:; //必须
};
上面代码中除了必须设置:target为index:1,以及目标元素的position:absolute,其他的都是基本样式
显示效果为:
以上就是:target制作tab选项卡的过程
by新手小白的记录
: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 伪类制作Dropdown下拉菜单(无JS)
:target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...
- CSS3属性之 target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...
- 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)
原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...
- CSS3 :target伪类实现Tab切换效果 BY commy
http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1 标签一 标签二 标签三 欢迎加设计达人Q群:50063010设 ...
- 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中 ...
随机推荐
- SLP alpha 阶段总结
这学期快结束了,SLP的alpha阶段也结束了.在alpha版中,我实现了SLP的基础练习模块和全局设置模块,其他几个模块由于能力有限.时间有限而没有实现. 其中基础练习模块目前只能支持4/4拍,有三 ...
- iOS 单例的销毁
今天做项目的时候,对于不同的用户,需要创建不同的数据库.但是退出登录切换账号时,因为用单例创建数据,导致切换账号不会切换数据.所以,需要销毁单例.销毁单例时,调用以下的代码: 在创建单例的那个类中,调 ...
- java插入排序
/** * 插入排序 * @param a * @date 2016-10-8 * @author shaobn */ public static void insertSort(int[] a){ ...
- JdbcUtils.java
package com.jdbc.dbutils; import java.lang.reflect.Field; import java.sql.Connection; import java.sq ...
- html5,单击文字自动获得焦点
<p><label for=""></label>这样单击后自动获得焦点</p>
- Android 中如何计算 App 的启动时间?
(转载) 已知的两种方法貌似可以获取,但是感觉结果不准确:一种是,adb shell am start -w packagename/activity,这个可以得到两个值,ThisTime和Total ...
- Office2010安装错误1402问题(我安装成功了)
转载:http://blog.sina.com.cn/s/blog_555ea2470101831d.html 做个记录. 1.卸载OFFICE 使用工具 MicrosoftFixit,Window ...
- C#的HTTP协议中POST与GET的区别
引言 HTTP协议我想任何IT人士都耳熟能详了,大家都能说出个所以然来.但是如果我问你HTTP协议的请求方法有哪些?POST与GET的差异?GET或POST传送数据量的大小有限制吗?HTTP响应的状态 ...
- iOS多线程同步锁
在iOS中有几种方法来解决多线程访问同一个内存地址的互斥同步问题: 方法一,@synchronized(id anObject),(最简单的方法)会自动对参数对象加锁,保证临界区内的代码线程安全 @s ...
- PhpStorm创建Drupal模块项目开发教程(1)
用户体验是应用程序开发的一个重要因素.一个加载时间长.设计差.导航不清晰的网站很难留住客户. Web应用程序由多个部分组成,并且可能运行在多种环境中,所以Web应用程序从开发开始就需要在所有环境中进行 ...