Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
}
.container {
	width:600px;
	margin:0 auto;
	margin-top:50px;
}
.tabs {
	width:600px;
	height:30px;
}
.tabs li {
	display:inline-block;
	width:200px;
	height:30px;
	line-height:30px;
	text-align:center;
}
.tabs li a {
	display:block;
	color:#999;
	border:1px solid #c82;
}
.tabs li.active a {
	color:#3d3d3d;
	border-bottom:2px solid #a20017;
}
.contents {
	width:600px;
	height:300px;
	position:relative;
	overflow:hidden;
	margin-top:20px;
	border:1px solid #c82;
}
.content {
	float:left;
	width:600px;
	height:300px;
}

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

jQuery实现具有特效的tab切换

这个是一个使用jquery做的具有特效的tab切换

3
      Yang-exhibitio0
      2019/2/15 9:55:08
      单个的border也能控制元素的高宽border-style: dotted;(dotted还有其他的)这样就不会有警告了。
      回复
      Yang-exhibitio0
      2019/2/15 9:43:53
      额...发现好多重复的句子...border和width,height重复了外加(.tabs li .active a )有点?嗦。直接.active a就可以了。 回复
      奋斗中的宝宝1
      2019/1/4 18:10:40
      这个代码中的动画需要在animate方法前面加上stop(),这样会达到更好的效果 回复