Html
    Css
    Js

    
                        
.tpt-bar {
	display:flex;
	border:1px solid #e2e2e2;
	border-radius:2px;
	background:#f2f2f2;
	box-shadow:0 2px 5px 0 rgba(0,0,0,.1);
	flex-wrap:wrap;
}
.tpt-bar label {
	display:block;
	padding:0 20px;
	height:38px;
	line-height:38px;
	cursor:pointer;
	order:1;
}
.tpt-bar .tpt-bar-con {
	z-index:0;
	display:none;
	margin-top:-1px;
	padding:10px;
	width:100%;
	min-height:120px;
	border-top:1px solid #e2e2e2;
	background:#fff;
	order:99;
}
.tpt-bar input[type=radio] {
	position:absolute;
	opacity:0;
}
.tpt-bar input[type=radio]:checked+label {
	z-index:1;
	margin-right:-1px;
	margin-left:-1px;
	border-right:1px solid #e2e2e2;
	border-left:1px solid #e2e2e2;
	background:#fff;
}
.tpt-bar input[type=radio]:checked+label+.tpt-bar-con {
	display:block;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯CSS选项卡

纯CSS选项卡,可以根据自己的需求修改代码

0