Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body,html {
	width:100%;
	height:100%;
	background:#f8f8f8;
}
.tab-wrap {
	position:absolute;
	left:50px;
	right:50px;
	top:50px;
	bottom:50px;
	background-color:#fff;
	box-shadow:0 12px 9px 0 rgba(0,0,0,0.10);
	border-radius:4px;
}
.tab-wrap .title {
	height:50px;
	line-height:50px;
	padding:0 20px;
	background-color:#00c1de;
	border-radius:4px 4px 0 0;
	color:#fff;
}
.tab-wrap .tab-title {
	overflow:hidden;
	list-style:none;
	border-bottom:1px solid #A2A2A2;
}
.tab-title .title-item {
	float:left;
	height:45px;
	line-height:45px;
	padding:0 30px;
}
.tab-title .title-item.active {
	border-bottom:2px solid #00c1de;
}
.tab-wrap .tab-content .content-item {
	display:none;
	padding:20px;
	color:#00c1de;
}
.tab-wrap .tab-content .content-item.active {
	display:block;
}

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

2行代码写一个 tab 选项卡功能,兼容IE8,上下左右自适应

这是一个兼容 ie8 的 tab 选项卡,功能很简单,布局可以上下左右自适应。

0