html div 做成页签,纯CSS实现页签切换效果

主要运用了 CSS3 的 :checked 选择器，

代码结构跟使用js差不多，只是多了几个radio，

不知道性能上是js快还是css快呢？

CSS3 TAB

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;

}

}

待付款

待签收

已完成

• 进货单号：jkdjh2015072623125699

  今天 23：12 进货

  60°飞天茅台最好的茅台浓香1000ml

  待确认：¥129.00

  X6

• 进货单号：jkdjh2015072623965199

  今天 23：12 进货

  50°西凤·御宴酒(精装版)500ml

  已发货：¥39.00

  X1

• 进货单号：jkdjh2015072623126899

  今天 23：12 进货

  法国富乐男爵干红葡萄酒豪华大礼包

  已签收：¥369.00

  X6