<link href="https://www.jb51.net/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/>
<script src="https://www.jb51.net/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<div>
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div>
<p>content of tab one</p>
</div>
<div>
<p>content of tab two</p>
</div>
<div>
<p>content of tab three</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
由于是用的MVC模板生成的项目，所以在Content/themes/base文件夹里已经放入了jQuery UI的CSS样式表，如果没有，你需要单独下载然后放到项目中，并在页面正确引用。
现在再来刷新一下页面，效果就出来了。
图 4
既然是用样式表控制的，代表着我们可以随意对它进行自定义，换颜色等，这在后面的应用样式 里介绍。
2.2Accordion
对于Accordion控件就有一些东西需要说的了。因为对于一个东西，如果它不够灵活，不易扩展，会给使用者带来很大的不便。
图 5
2.2.1使用基本的Accordion
先来看一下如何将Accordion插件应用起来。我们将它放到我们的Tabs1页面里。同Tabs一样，应用起来也非常的简单，只需把相应的Div定义好，之后，在脚本总要所要做的工作也就是一句代码的事。是不是体验到了jQuery UI所带来的便捷了。
将之前tabs-1 Div 中的<P>标签及内容删除掉，用如下的代码替换。
复制代码 代码如下:
<div>
<div>
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
</div>
其中id为accordion的外围Div是容器，在脚本代码里面选中它然后对它应用accordion方法。
复制代码 代码如下:
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion").accordion();
})
</script>
之后，里面的每个<a>标签就会被解析成一个可以点击的标题，<a>标签后紧跟<div>用于放置本小块的内容。最后效果如下图。
图 6
需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个<a>标签然后跟一个<div>标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在<a>跟两个<div>：
复制代码 代码如下:
<div>
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
你原本以为 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
图 7