1：首先我们先创建一个最基本的tab，它需要<ul>元素，并且每一个<li>都需要一<span>和一<a>元素，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>A basic tab implementation</title>
<link href="../css/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/redmond/ui.tabs.css" />
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../ui/ui.core.js"></script>
<script type="text/javascript" src="../ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#myTabs").tabs();
});
</script>
<style type="text/css">
body{ font: 62.5% "Trebuchet MS", sans-serif; margin: 0px;}
</style>
</head>
<body>
<div id="myTabs">
<ul>
<li><a href="#0"><span>Tab 1</span></a></li>
<li><a href="#1"><span>Tab 2</span></a></li>
</ul>
<div id="0">
sun
</div>
<div id="1">
fish
</div>
</div>
</body>
</html>
效果图如下：
![]H)14~`PU$(E$E{BJE_0K}C](http://images.cnblogs.com/cnblogs_com/sunfishlu/WindowsLiveWriter/JQueryUItab_14221/%5DH%2914~%60PU$%28E$E%7BBJE_0K%7DC_2.jpg "]H)14~`PU$(E$E{BJE_0K}C")
2：属性
2.1:ajaxOptions：当选项卡加载内容时，添加一个ajax选项。
2.2:cache：是否启用缓存，默认为false。
2.3:disabled：设置那些选项卡不能使用。
2.4:idPrefix：
2.5:event：切换选项卡的事件，默认为click。（mouseover，鼠标滑过切换）
2.6:fx：切换选项卡时的动画效果
2.7:panelTemplate
2.8:tabTemplate
2.9:selected:哪个选项卡被选中
例子：
<script type="text/javascript">
$(document).ready(function () {
var tabOpts = {
selected: 1,
fx:{
opacity:"toggle",
duration:"slow"
}
};
$("#myTabs").tabs(tabOpts);
});
</script>效果图：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。
