Html
    Css
    Js

    
                        
.box {
	width:500px;
	height:500px;
	margin:100px auto;
	border:1px solid #000;
}
.top {
	display:flex;
	justify-content:space-between;
	align-items:center;
	border-bottom:1px solid #000;
	padding-right:2em;
}
ul {
	padding-left:0;
	list-style:none;
	display:flex;
	justify-content:flex-start;
	align-items:center;
	margin:0;
}
ul li {
	position:relative;
	padding:15px 35px;
	border-right:1px solid #000;
}
ul li.active {
	background-color:#ddd;
}
ul li .iconfont {
	position:absolute;
	right:0;
	top:0;
	font-size:20px;
	background:#aaa;
	color:#fff;
	border-bottom-left-radius:5px;
}
.add-box {
	border:1px solid #ccc;
}
.add-box .iconfont {
	font-size:25px;
}
.bottom section {
	display:none;
}
.bottom section.item {
	display:block;
}

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

纯手写原生tab切换栏代码

更新时间:2020-08-20 00:31:37

0