<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css3带阴影效果的tab选项卡 - 网页模板</title>
<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<!--[if gte IE 6]>
<style type="text/css">
ul#navigation li.selected a:link, ul#navigation li.selected a:visited {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#f2f2f2'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#d1d1d1, endColorstr=#f2f2f2)"; /* IE8 */
}
</style>
<![endif]-->
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body style="width: 98%;">
<div style="width: 1000px; margin: 0 auto 0 auto;">
<h1>CSS3 Glow Tabs with Box Shadow</h1>
<ul id="navigation">
<li class="one"><a href="#">Details</a></li>
<li class="two"><a href="#">Schedule</a></li>
<li class="three selected"><a href="#">Speakers</a></li>
<li class="four"><a href="#">Sponsors</a></li>
<li class="five"><a href="#">Register</a></li>
<li class="shadow"></li>
</ul>
<div id="content">
<h2>The tabs in this demo are image-less tabs<br />with 4 different CSS3 enhancements:</h2>
<ol>
<li>Rounded Corners (border-radius)</li>
<li>Box Shadow (bottom of inactive tabs)</li>
<li>Transitions (the glow on hover)</li>
<li>Gradients (the active tab)</li>
</ol>
<h2>CSS Transitions work in Chrome, Safari, Opera 10.5 & Firefox 3.7</h2>
<h2>The basic idea and techniques presented here are taken from the tabs on the jQuery Conference site.</h2>
<h2>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br /></h2>
<h2>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a><br /></h2>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("ul#navigation li a").click(function() {
$("ul#navigation li").removeClass("selected");
$(this).parents().addClass("selected");
return false;
});
});
</script>
<br>
</body>
</html>
