HTML5 css3圆角菱形带动画的网页选项卡代码

时间：2013-08-07 08:30 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+jQuery动态滑动的Tab选项卡效果</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery1.3.2.js"></script>
<style>
body{
font-size:13px;
	background: #fff;
	font-family:Arial, Helvetica, sans-serif;
}
.b, .c{ display:none;}
#body em{ font-style:normal; font-size:36px;}
.buttons{
	border-bottom:solid #d1c8b8 4px;
	display:block;
	padding:8px;
	width:80px;-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;
	text-align:center;
	margin:1px;
	background:#4b7975;
	text-decoration:none; color:#FFFFFF;
	float:left;font-family:Georgia, "Times New Roman", Times, serif; font-size:14px
}
.buttonHover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
a.buttons:hover{background:#86b8b4;border-bottom:solid #FF0000 4px;}
#body {
	background:#919b9d;
	text-align:justify;
	overflow:hidden;
	color:#fff;
	padding:20px;
	-moz-border-radius: 1em 4em 1em 4em;
	border-radius: 1em 4em 1em 4em;	height:200px;
	width:272px;
}
#wrap{
	text-align:left;
	overflow:hidden;
	width:350px;
	height:380px;
}
</style>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() { 
$("#first-tab").addClass('buttonHover');
});
function navigate_tabs(container, tab)
{	
	$(".b").css('display' , 'none');
	$(".c").css('display' , 'none');
	$(".a").css('display' , 'none');
	$("#first-tab").removeClass('buttonHover');
	$("#second-tab").removeClass('buttonHover');
	$("#third-tab").removeClass('buttonHover');
	$("#"+tab).addClass('buttonHover');
	$("."+container).show('slow');
}
// ]]>
</script>
</head>
<body>
	<div align="center">
		<div id="wrap">
		<a href="javascript:navigate_tabs('a','first-tab');" class="buttons" id="first-tab">选项卡1</a>  
		<a href="javascript:navigate_tabs('b','second-tab');" class="buttons" id="second-tab">选项卡 2</a>
		<a href="javascript:navigate_tabs('c','third-tab');" class="buttons" id="third-tab">选项卡 3</a>
		<br clear="all" />
		<div id="body" align="center">
		<div class="a">
		<em>99</em>感谢您关注源码搜藏网网页特效栏目，有空多来哦~  <br />  <br /> Thanks!
				</div>
				<div class="b"><em>我</em>们生活在一个零乱的世界中，要学会自我解压，想一想，我们并不是最糟的，要鼓起勇气，勇敢前行！				</div>
				<div class="c"><em>天</em>空灰蒙蒙的，或许又要下雨了. 这是选项卡3的内容。
				</div>
			</div>	
		</div>
	</div>
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" /><br clear="all" />
<br clear="all" /><br clear="all" />			  
</body>
</html>