Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
	box-sizing:border-box
}
div {
	width:70%;
	margin:20px auto;
}
ul {
	list-style:none;
	overflow:hidden;
}
.box {
	margin-top:10px;
}
#navm {
	width:400px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:#EE9900;
}
#navm >li {
	width:20%;
	height:40px;
	float:left;
	border:1px solid #c5c5c5;
	border-bottom:none;
}
#navm >li.active {
	background:#fff;
}
#contentm {
	width:400px;
	height:300px;
	position:relative;
	border:1px solid #c5c5c5;
	border-top:none;
}
#contentm >li {
	width:100%;
	height:100%;
	position:absolute;
	display:none
}
#contentm >li>img {
	width:402px;
	height:100%;
	position:absolute;
}
#navl {
	width:300px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:#c5c5c5;
}
#navl> li {
	width:25%;
	height:40px;
	float:left;
	border:1px solid #c5c5c5;
	border-bottom:none;
}
#navl >li.active {
	background:#fff;
}
#contentl {
	width:300px;
	height:200px;
	position:relative;
	border:1px solid #c5c5c5;
	border-top:none;
}
#contentl> li {
	width:100%;
	height:100%;
	position:absolute;
	padding:10px;
	display:none
}

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

封装的Tab选项卡

函数分装的tab选项卡,可以嵌套使用。

0