jQueryUI tabs render but don't work - umbraco

Question

I'm using jQueryUI tabs as part of an Umbraco page. Here's the core HTML for that page:
<asp:Content ContentPlaceHolderID="body" ID="ContentBody" runat="server">
<cc1:UmbracoPanel runat="server" Height="224px" Width="412px" hasMenu="false" meta:resourcekey="PageTitle">
<div style="padding: 2px 15px 0px 15px">
<div class="dashboardWrapper">
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
<div id="tabs-3">
<p>Tab 3</p>
</div>
</div>
</div>
</div>
</cc1:UmbracoPanel>
</asp:Content>
Although the tabs are rendered, the content of all the tabs can be seen in tab 1. When clicking other tabs, such as tab 2 or 3, the content does not change. It's as though the clicking of the tabs do nothing.
I've double-checked the HTML and I don't believe that anything is amiss, such as the id values of the div elements differ to those expected in the corresponding a tags, but I cannot see what is wrong.
EDIT
Ah, forgot the jQuery :)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="stylesheet" type="text/css" href="/umbraco_client/application/jquery/jquerytabs.css" />
<script type="text/javascript" src="/umbraco_client/ui/jqueryui.js"></script>
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
})
</script>
</asp:Content>