CSS3属性之 target伪类实现Tab切换效果
2023-09-11 14:22:19 时间
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: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 { 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; } .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
相关文章
- [web 前端] css3 transform方法常用属性
- JavaScript の 内容属性(HTML属性attribute)和 DOM 属性(property)
- Javascript String类的属性及方法
- java - 类属性 初始化的三种形式及顺序
- WIN10系统右击开始菜单没有属性选项怎么办
- Android自定义属性
- android:gravity 和 android:layout_Gravity属性
- 前端学习 -- Css -- 字体的几个属性学习
- Python 力扣刷题之单链表专场!例题20+ 属性和方法60+
- MFC Windows 程序设计[二十]之绘图属性页
- 113. 授人以渔 - 如何自行查询任意 SAP UI5 控件属性的文档和技术实现细节
- Xml 常用属性、方法
- 〖大前端 - 基础入门三大核心之CSS篇⑦〗- CSS3文本的常用文本样式属性
- 〖大前端 - 基础入门三大核心之CSS篇⑧〗- CSS3文本的常用文本样式属性之字体属性详解
- 【编程实践】react 嵌套路由以及 exact 属性用法
- wpf 附加属性