为了在页面上呈现Tabs插件，我们需要定义一个Div，并且在<script>脚本代码里面选中它，在它身上应用tabs方法。
<div id=”tabs”>
</div>
<script type=”text/javascript”>
$(document).ready(function () {
$(“#tabs”).tabs();
})
</script>
现在运行程序不会看到任何东西，因为我们还没有往主体Div中定义要显示的tab,只是定义好了一个可以放tabs的地方。现在tabs Div中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。
<div id=”tabs”>
<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 id=”tabs-1″>
<p>content of tab one</p>
</div>
<div id=”tabs-2″>
<p>content of tab two</p>
</div>
<div id=”tabs-3″>
<p>content of tab three</p>
</div>
</div>
这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序：
图 2
值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQuery UI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。
图 3
最后完整的代码大概是这样的。
<link href=”//www.jb51.net/Content/themes/base/jquery.ui.all.css”type=”text/css”rel=”stylesheet”/>
<script src=”//www.jb51.net/Scripts/jquery-ui-1.8.11.min.js” type=”text/javascript”></script>
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>Tabs1</a></li>
<li><a href=”#tabs-2″>Tabs2</a></li>
