http://www.shejidaren.com/examples/css3-target/css3-target.html#tab1

欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!

本Tab切换效果纯CSS3制作,无任何JavaScript

最新Q群:50063010
爱设计,爱分享——设计达人(http://www.shejidaren.com

高质量设计文章分享平台

欢迎加设计达人Q群:50063010
设计达人以原创和分享一些高质量的设计文章为主,希望喜欢

CSS样式

.tablist {position:relative;margin:50px auto;min-height:200px;}
/* this example style begin */
.tab_content {
position: absolute;/*set content box as absolute*/
/* content style begin*/
width:600px;height:170px;padding:15px;border:1px solid #91a7b4;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.1);font-size:1.2em;line-height:1.5em;color:#666;background:#fff;
}
#tab1:target, #tab2:target, #tab3:target {
z-index: 1;
} /* tabmenu style */
.tabmenu {position:absolute;top:100%;margin:0;}
.tabmenu li{display:inline-block;}
.tabmenu li a {display:block;padding:5px 10px;margin:0 10px 0 0;border:1px solid #91a7b4;border-radius:0 0 5px 5px;background:#e3f1f8;color:#333;text-decoration:none;}

HTML代码

<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">欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢!
<!-- end tab1 content --></div>
<div id="tab2" class="tab_content"><p>本Tab切换效果纯CSS3制作,无任何JavaScript</p>最新Q群:50063010<br />爱设计,爱分享——设计达人(http://www.shejidaren.com)
<!-- end tab2 content--></div>
<div id="tab3" class="tab_content"><p style="font-size:24px;">高质量设计文章分享平台</p><p>欢迎加设计达人Q群:50063010<br />设计达人以原创和分享一些高质量的设计文章为主,希望喜欢</p>
<!-- end tab3 content--></div>
</div>

CSS3 :target伪类实现Tab切换效果 BY commy的更多相关文章

  1. CSS3 :target伪类实现Tab切换效果

    用:target伪类实现Tab切换效果真的非常简单!简单到什么程度呢?它只需要下面这些代码. style.css: .song-info { position: absolute; backgroun ...

  2. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  3. CSS3属性之 target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式 代码示例: <!DOCTYPE html> <html lang="en"> < ...

  4. CSS3 :target伪类的理解与使用

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID元素的样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏 ...

  5. 巧用CSS3 :target 伪类制作Dropdown下拉菜单(无JS)

    :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如说当前页面URL下添加#comment就会定位到id=“comment”的位置,俗称锚).CSS3 为 ...

  6. CSS3 target伪类简介

    CSS3 target伪类是众多实用的CSS3特性中的一个.它用来匹配文档(页面)的URI中某个标志符的目标元素.具体来说,URI中的标志符通常会包含一个”#”字符,然后后面带有一个标志符名称,比如# ...

  7. CSS3 target 伪类不得不说那些事儿(纯CSS实现tab切换)

    是不是觉得target有点眼熟?! 今天要讲的不是HTML的<a>标签里面有个target属性. target伪类是css3的新属性. 说到伪类,对css属性的人肯定都知道:hover.: ...

  8. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  9. 巧用CSS3:target 伪类制作Dropdown下拉菜单(无JS)

    原文链接:http://devework.com/css3-target-dropdown.html :target 是CSS3 中新增的一个伪类,用以匹配当前页面的URI中某个标志符的目标元素(比如 ...

随机推荐

  1. 3个普通IO识别22个按键试验(转)

    源:http://www.amobbs.com/forum.php?mod=viewthread&tid=2243715 吸取各位前辈的经验,将之前二极管用量多的问题优化一下,目前不用二极管能 ...

  2. 关于Stringbulider类

    在使用String类构造一个字符串时,要给它分配足够的内存来保存字符串,但StringBuilder通常分配的内存会比需要的更多.开发人员可以选择显式指定StringBuilder要分配多少内存,但如 ...

  3. didMoveToSuperView 引发的思考

    1. - (void)didMoveToSuperview 通知视图已经移动到一个新的父视图中 2. /**系统自动调用(留给子类去实现)**/ - (void)didAddSubview:(UIVi ...

  4. PAT (Advanced Level) 1062. Talent and Virtue (25)

    简单排序.题意较长. #include<cstdio> #include<cstring> #include<cmath> #include<queue> ...

  5. hihoCoder 1257 Snake Carpet(很简单的构造方法)

    2015 ACM / ICPC 北京现场赛 I 题 构造 注意一个小坑,每条蛇的输出是要从头到尾输出的. 还要注意的是,不能开数组去模拟构造过程,然后输出,那样会TLE的. #include < ...

  6. PAT1010

    Given a pair of positive integers, for example, 6 and 110, 给出一对正整数,例如6和110 can this equation 6 = 110 ...

  7. [iOS开发]WKWebView加载JS

    最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo. 先看我写的代码,然后再来看WKWebView跟UIWe ...

  8. CodeForces 609D Gadgets for dollars and pounds

    二分天数+验证 #include<cstdio> #include<cstring> #include<cmath> #include<algorithm&g ...

  9. (四)Jquery Mobile表单

    Jquery Mobile表单与列表 一.JM表单      1.表单      普通html表单            效果:          2.只能输入数字的表单           效果:  ...

  10. Nginx 负载均衡 后端服务器获取前端用户真实IP

    Nginx 后端 日志文件 获取的都是 前端 负载均衡器的IP 想要获取用户的真实IP 必须 使用Nginx 的模块  http_realip_module  才行!! 1. 编译 Nginx 的时候 ...