主要運(yùn)用了 CSS3 的 :checked 選擇器，

代碼結(jié)構(gòu)跟使用js差不多，只是多了幾個(gè)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;

}

}

待付款

待簽收

已完成

• 進(jìn)貨單號：jkdjh2015072623125699

  今天 23：12 進(jìn)貨

  60°飛天茅臺最好的茅臺濃香1000ml

  待確認(rèn)：￥129.00

  X6

• 進(jìn)貨單號：jkdjh2015072623965199

  今天 23：12 進(jìn)貨

  50°西鳳·御宴酒(精裝版)500ml

  已發(fā)貨：￥39.00

  X1

• 進(jìn)貨單號：jkdjh2015072623126899

  今天 23：12 進(jìn)貨

  法國富樂男爵干紅葡萄酒豪華大禮包

  已簽收：￥369.00

  X6

總結(jié)

以上是生活随笔為你收集整理的html如何实现切换效果,纯CSS实现页签切换效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。