css3圆角tab选项卡代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery+css3圆角tab选项卡切换</title>
<style>
*{margin: 0;padding: 0;}
body{font: 14px Georgia, serif;}
h1{width: 310px;margin: 0 auto;padding: 20px 0;color: #222;}
.group: before,
.group: after{content: "";display: table;}
.group: after{clear: both;}
.group{zoom: 1;}
body{background: #222;}
#content{background: white;min-height: 400px;}
.tabs{list-style: none;margin: 60px auto 0;width: 660px;}
.tabs li{float: left;position: relative;}
.tabs a{float: left;padding: 10px 40px;text-decoration: none;color: black;background: #ddc385;-webkit-border-top-left-radius: 15px;-webkit-border-top-right-radius: 15px;-moz-border-radius-topleft: 15px;-moz-border-radius-topright: 15px;border-top-left-radius: 15px;border-top-right-radius: 15px;}
.tabs .active{z-index: 3;}
.tabs .active a{background: white;color: black;}
.tabs li: before, .tabs li: after,.tabs li a: before, .tabs li a: after{position: absolute;bottom: 0;}
.tabs li: last-child: after, .tabs li: last-child a: after,.tabs li: first-child: before, .tabs li: first-child a: before,.tabs .active: after, .tabs .active: before,.tabs .active a: after, .tabs .active a: before{content: "";}
.tabs .active: before, .tabs .active: after{background: white;z-index: 1;}
.tabs li: before, .tabs li: after{background: #ddc385;width: 10px;height: 10px;}
.tabs li: before{left: -10px;}
.tabs li: after{right: -10px;}
.tabs li a: after, .tabs li a: before{width: 20px;height: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;background: #222;z-index: 2;}
.tabs .active a: after, .tabs .active a: before{background: #ddc385;}
.tabs li: first-child.active a: before,.tabs li: last-child.active a: after{background: #222;}
.tabs li a: before{left: -20px;}
.tabs li a: after{right: -20px;}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function(){
	$("li").click(function(e) {
		e.preventDefault();
		$("li").removeClass("active");
		$(this).addClass("active");
	});
});
</script>
</head>
<body>
	<ul class="tabs group">
	  <li class="active"><a href="#one">One</a></li> 
	  <li><a href="#two">Two</a></li> 
	  <li><a href="#three">Three</a></li>
	  <li><a href="#three">Four</a></li> 
	</ul>
<div id="content">
<h1>Round Out Tabs</h1>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

css3圆角tab选项卡代码

分类

CSS3

描述

CSS3+jquery实现圆角选项卡，鼠标点击时候才切换的那种选项卡，无图片修饰，全部代码写出来的，基于CSS3技术，测试请用火狐。IE8下看不到圆角效果。