Html
    Css
    Js

    
                        
html,body {
	margin:0;
	padding:0;
	width:100%;
	font-family:"Microsoft Yahei";
}
.tabs {
	width:80%;
	height:300px;
	margin:50px 10%;
	border:1px solid #ccc;
}
.tab-title {
	display:flex;
	background:#fff;
}
.tab-title a {
	display:block;
	text-decoration:none;
	text-align:center;
	width:25%;
	height:40px;
	flex:1;
	padding:0 10px;
	color:#666;
	font-size:16px;
	line-height:40px;
	border-right:1px solid #f40;
	border-bottom:2px solid #f40;
}
.tab-title a:last-child {
	border-right:0;
}
.tab-title a.active {
	color:#f40;
	border-bottom:0;
}
.tab-content {
	width:100%;
	height:100%;
}
.tab-content .cont {
	display:none;
	overflow:hidden;
	font-size:50px;
}

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

data属性和jQuery实现tab栏切换效果

0