I have the following markup:
<SharePoint:CssRegistration ID="cr_jqui" Name="/Layouts/MultiPart/css/smoothness/jquery-ui-1.8.12.custom.css" runat="server" After="corev4.css" />
<SharePoint:ScriptLink ID="sl_jq" runat="server" Name="MultiPart/js/jquery-1.5.1.min.js" Localizable="false" />
<SharePoint:ScriptLink ID="ScriptLink1" runat="server" Name="MultiPart/js/jquery-ui-1.8.12.custom.min.js" Localizable="false" />
<script type="text/javascript">
function LoadTabs() {
$("#tabs").tabs();
alert('set');
}
_spBodyOnLoadFunctionNames.push("LoadTabs");
</script>
<div id="tabs">
<ul>
<li><a href="#tab1">Nunc tincidunt</a></li>
<li><a href="#tab2">Proin dolor</a></li>
<li><a href="#tab3">Aenean lacinia</a></li>
</ul>
<div id="tab1">
Tab1 content
</div>
<div id="tab2">
Tab2 content
</div>
<div id="tab3">
tab3 content
</div>
<div id="tab4">
tab4 content
</div>
<div id="tab5">
tab5 content
</div>
</div>
And I have created a Mapped layouts folder with the following structure:
For some reason this does not display tabs as it should (renders it as if there was no JS or CSS). It alerts "set" like you would expect and does not throw any errors. I moved it to it's html page equivalent and it works. Any ideas what I am doing wrong?