选项卡tab效果，动画
演示地址:http://www.corange.cn/demo/3770/index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Tab菜单</title>
<link type="text/css" href="jquery.ui/flora.tabs.css" rel="stylesheet" />
<style type="text/css">
<!--
body{
background:#ffe7bc;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="jquery.ui/ui.base.min.js"></script>
<script language="javascript" src="jquery.ui/ui.tabs.min.js"></script>
<script language="javascript">
$(function(){
//直接制作Tab菜单，默认选择为第二项，且切换的时候fade动画
$("#container > ul").tabs({fx:{opacity:"toggle",height:"toggle"}, selected:1});
});
</script>
</head>
<body>
<div id="container">
<ul>
<li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Three</span></a></li>
</ul>
<div id="fragment-1">www.corange.cn</div>
<div id="fragment-2">asp,php</div>
<div id="fragment-3"> js等各种代码</div>
</div>
</body>
</html>
原文地址:http://www.corange.cn/archives/2011/05/3770.html