纯CSS实现页签切换效果
主要运用了 CSS3
的 :checked
选择器,
代码结构跟使用js
差不多,只是多了几个radio
,
不知道性能上是js
快还是css
快呢?
codepen
地址:http://codepen.io/YuanWing/pen/RPqvad
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>CSS3 TAB</title><style>body {font-family: 'Microsoft YaHei'; font-size: 14px;background-color: #f5f4f7;margin: 0;color: #252525;}a {text-decoration: none;}h3, h4 {margin: 0;font-weight: 400;font-size: inherit;}ul {padding-left: 0;list-style: none;margin: 0;}p {margin-top: 0;margin-bottom: 0;}.Jhds {position: relative;}.Jhds .radio {opacity: 0;position: absolute; }.Jhds .radio:nth-of-type(1):checked ~ .tab-title label:nth-of-type(1) {color: #fff;background-color: #498fee;}.Jhds .radio:nth-of-type(2):checked ~ .tab-title label:nth-of-type(2) {color: #fff;background-color: #498fee;}.Jhds .radio:nth-of-type(3):checked ~ .tab-title label:nth-of-type(3) {color: #fff;background-color: #498fee;}.Jhds .radio:nth-of-type(1):checked ~ .tab-outer .tab-inner:nth-of-type(1) {display: block;}.Jhds .radio:nth-of-type(2):checked ~ .tab-outer .tab-inner:nth-of-type(2) {display: block;}.Jhds .radio:nth-of-type(3):checked ~ .tab-outer .tab-inner:nth-of-type(3) {display: block;}.Jhds .tab-title {font-size: 0;padding: 15px;text-align: center;}.Jhds .tab-title label{display: inline-block;color: #498fee;text-align: center;background-color: #fff;border: 1px solid #498fee;font-size: 14px;width: 30%;padding: 5px 0;}.Jhds .tab-title label:first-child {border-right: 0 none;border-top-left-radius: 5px;border-bottom-left-radius: 5px;}.Jhds .tab-title label:last-child {border-left: 0 none;border-top-right-radius: 5px;border-bottom-right-radius: 5px;}.Jhds .tab-outer .tab-inner {display: none;}.Jhds .tab-inner li{position: relative;background-color: #fff;}.Jhds .title:after,.Jhds .tab-inner li:before,.Jhds .tab-inner li:last-child:after{position: absolute;left: 0;content: '';width: 100%;height: 1px;font-size: 0;background-color: #d9d9d9;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}.Jhds .tab-inner li:before {top: 0;}.Jhds .title:after,.Jhds .tab-inner li:last-child:after {bottom: 0;}.Jhds .title {padding: 10px;position: relative;overflow: hidden;}.Jhds .title .Jhds-num {color: #498fee;white-space: nowrap;}.Jhds .title .time {float: right;display: inline-block;}.Jhds .list {padding: 10px 60px 10px 10px;position: relative;color: #252525;display: block;}.Jhds .price {color: #f90;margin-top: 5px;}.Jhds .num {position: absolute;right: 30px;top: 50%;height: 20px;line-height: 20px;margin-top: -10px;}.arrow {position: absolute;right: 10px;top: 50%;margin-top: -6px;width: 10px;height: 10px;border-left: 1px solid #cfcfcf;border-top: 1px solid #cfcfcf;-webkit-transform: rotate(135deg);transform: rotate(135deg);}@media screen and (max-width:370px) {.Jhds .title .time {float: none;}}</style>
</head>
<body><div class="Jhds"><input checked class="radio" type="radio" name="Jhds" id="Jhds1"><input class="radio" type="radio" name="Jhds" id="Jhds2"><input class="radio" type="radio" name="Jhds" id="Jhds3"><div class="tab-title"><label for="Jhds1">待付款</label><label for="Jhds2">待签收</label><label for="Jhds3">已完成</label></div><div class="tab-outer"><ul class="tab-inner"><li><h3 class="title"><span class="Jhds-num">进货单号:jkdjh2015072623125699</span><span class="time">今天 23:12 进货</span></h3><a class="list" href="###"><h4>60°飞天茅台最好的茅台浓香1000ml</h4><p class="price">待确认:¥129.00</p><span class="num">X6</span><span class="arrow"></span></a></li></ul><ul class="tab-inner"><li><h3 class="title"><span class="Jhds-num">进货单号:jkdjh2015072623965199</span><span class="time">今天 23:12 进货</span></h3><a class="list" href="###"><h4>50°西凤·御宴酒(精装版)500ml</h4><p class="price">已发货:¥39.00</p><span class="num">X1</span><span class="arrow"></span></a></li></ul><ul class="tab-inner"><li><h3 class="title"><span class="Jhds-num">进货单号:jkdjh2015072623126899</span><span class="time">今天 23:12 进货</span></h3><a class="list" href="###"><h4>法国富乐男爵干红葡萄酒豪华大礼包</h4><p class="price">已签收:¥369.00</p><span class="num">X6</span><span class="arrow"></span></a></li></ul></div></div>
</body>
</html>
纯CSS实现页签切换效果相关推荐
- html如何实现切换效果,纯CSS实现页签切换效果
主要运用了 CSS3 的 :checked 选择器, 代码结构跟使用js差不多,只是多了几个radio, 不知道性能上是js快还是css快呢? CSS3 TAB body { font-family: ...
- 利用JQuery插件CleverTabs实现多页签打开效果
在VS中,我们能打开多页签,并在不同的页签之间进行浏览和操作,这一功能通过JQuery插件CleverTabs也能实现此效果.CleverTabs下载请点击这里:JQuery CleverTabs 本 ...
- html 点击加号展开代码,纯css实现加号一个的效果(代码示例)
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
- java实现展示框,如何使用纯CSS实现蝴蝶标本的展示框效果
本篇文章给大家带来的内容是关于如何使用纯CSS实现蝴蝶标本的展示框效果 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 git ...
- css三实现ui,纯CSS实现常见的UI效果
原标题:纯CSS实现常见的UI效果 转自:掘金 - alphardex 前言 切图仔,是大多数前端用来自嘲的称呼.相信很多人平时写页面的时候,大部分时间是在切图和排图,如此往复.这里并不是要否定切图本 ...
- 【CSS】纯css实现立体摆放图片效果
1. 元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...
- Css实现刘海,纯CSS样式写刘海屏效果
1. 效果: 2. 代码: 刘海? :root { --bg--color: #ed4014; } body { background: var(--bg--color); } .top_bar_di ...
- css实现提示信息,纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- html怎么把字做成动画效果,利用纯CSS实现动态的文字效果实例
大家可能经常会看到类似酷炫的网站: 在这类网站中能看到,一打开页面,无论是文字还是图片,都随着规定时间的而变化.原理很简单,主要用到CSS中animation属性. 接下来,我以我目前的工程项目为例, ...
最新文章
- .net微软消息队列(msmq)简单案例
- 人工智能目标检测模型(四)——ResNet
- Spring 跨域问题CORS (Cross Origin Resources Share)
- 信标链 分片链 是什么?
- 从心理学角度看,如何提高招聘面试的准确率?
- android从子页面跳转回主页面注意
- webstorm快捷键生成html页面,webStorm快捷键总结
- MATLAB 6.封装 相频特性
- 中国大陆身份证正则表达式(严格验证省份和日期)
- 问题 2111: 连环阵
- 【PhotoShop基础B篇】准确控制曝光
- 创维30周年庆典举行,中国制造业标杆向千亿目标加速冲刺
- JavaScript RegExp 身份证、账号密码、email正则
- int函数python_int()函数
- 物联网技术如何改变了我们的生活?
- 深度deep Linux系统软件应用商店下载地址
- 分享 | 快递鸟电子面单API参数接口
- 不想做却不得不做某份工作,怎么破?
- 2021年昆明师专附中高考成绩查询,云南省昆明市云南师范大学附属中学2020-2021学年高三高考适应性月考卷(一)语文试题...
- IIS 元数据访问失败