Html
    Css
    Js

    
                        
.tabs {
	overflow:hidden;
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
}
.tabs li {
	float:left;
	margin:0 -15px 0 0;
	border-bottom:1px solid #3d3d3d;
}
.tabs a {
	float:left;
	position:relative;
	padding:0 10px;
	height:0;
	line-height:25px;
	text-transform:uppercase;
	text-decoration:none;
	color:#fff;
	border-right:30px solid transparent;
	border-bottom:25px solid #3D3D3D;
	font-size:12px;
	border-bottom-color:#777\9;
	opacity:.3;
	filter:alpha(opacity =       30);
}
.tabs a:hover,.tabs a:focus {
	border-bottom-color:#2ac7e1;
	opacity:1;
	filter:alpha(opacity =       100);
}
.tabs a:focus {
	outline:0;
}
.tabs .current {
	z-index:3;
	border-bottom-color:#3d3d3d;
	opacity:1;
	filter:alpha(opacity =       100);
}
.content {
	background:#fff;
	padding-top:10px;
	font-size:12px;
}
.content h2,.content h3,.content p {
	margin:0 0 15px 0;
}
.about {
	color:#999;
	text-align:center;
	font:0.9em Arial,Helvetica;
}
.about a {
	color:#777;
}

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

Tab标签页

首先得先学好jQuery里面的所有方法 ,然后在jQuery里运用所学到的方法来实现多种效果

1
      s2903059150
      2017/9/27 15:15:26