初始隐藏的asp.net面板上的JQuery选项卡

Question

在我的asp.net项目中，我有一个面板，上面有一个jquery tabs div。 最初，面板是隐藏的，如果我单击按钮，则会显示该面板。

这是非常简单的代码：

<div id="tabs">
        <ul id="none">
            <li><a href="#tabs-1">Asset details</a></li>
            <li><a href="#tabs-2">Structure details</a></li>
            <li><a href="#tabs-4">Audit Info</a></li>
        </ul>

        <div id="tabs-1">Some Content for tab 1</div>
        <div id="tabs-2">Some Content for tab 2</div>
        <div id="tabs-3">Some Content for tab 3</div>
    </div>

和jquery代码：

function myfunction() {

$("#tabs").tabs();

}

问题在于，当我显示面板时，标签div可见但未格式化。

如果我在myfunction上设置延迟，则全部正常运行：

function myfunction() {

//$("#tabs").tabs();

setTimeout(function () {
    $("#tabs").tabs();
}, 500);

}

有没有办法以更安全的方式解决这个问题？

这里缺少代码：

点击时显示我的面板的按钮：

<my:RoundedButton ID="BillingDataButton" runat="server" 
SkinID="Small"
Text="Billing data" 
OnClick="BillingDataButton_Click"

/＆GT;

代码背后：

protected void BillingDataButton_Click(object sender, EventArgs e)
    {

        BillingDataPanel.Show();

    }

我试过这个（感谢迈克尔）：

$(document).ready(function() {
$("#tabs").tabs();

}）;

但是当我点击我的按钮并显示面板时，结果是：

更新 - 可能的解决方案

在我的asp.net页面中添加了此代码：

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function (s, e) {

    myfunction();

});

这确保了在请求结束时执行用于显示选项卡的jquery代码。在这种情况下，没有请求setTimeout。

如果找到更好的解决方案，请通知我。

Answer 1

这实际上是预期的行为，但有一个更清洁的解决方案：

$(document).ready(function() {
    $("#tabs").tabs();
});

你知道，在DOM完全可用之前，jQuery无法进行所有修改。这就是为什么延迟适合你，但它是偶然的。如果这是在一个速度较慢的浏览器上运行的话，它肯定会失败。

然而，利用document.ready事件是社区中更加稳定，首选和可接受的解决方案。事实上，就初始化而言，你真的不应该在这个方法之外的jQuery中做任何。