我正在使用 jQueryUI 选项卡作为 Umbraco 页面的一部分。这是该页面的核心 HTML:
<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><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></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>
虽然呈现了选项卡,但在选项卡 1 中可以看到所有选项卡的内容。单击其他选项卡时,例如选项卡 2 或 3,内容不会改变。好像单击选项卡什么都不做。
我已经仔细检查了 HTML,我不认为有任何问题,例如元素的id
值div
与相应a
标签中的预期值不同,但我看不出有什么问题。
编辑啊,忘了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>