如何卸载隐藏/不活动的jquery ui选项卡?

时间:2013-11-08 13:38:16

标签: jquery jquery-ui-tabs removechild

我在asp.net mvc web应用程序中使用Jquery UI选项卡。

我总共有6个标签。每个选项卡都包含一个用户控件。

我使用像这样的ajax动态地将内容加载到每个标签中:

 <div id="tabs" style="clear: both" align="center">
        <ul>
            <li><a href="<%:Url.Action("AddControl","App",new {id=Model.ID}) %>">
                <span>Tab </span></a></li>
            <li><a href="<%:Url.Action("Control","App",new {id=1,data=Model.ID}) %>">
                <span>Tab1</span></a></li>
            <li><a href="<%:Url.Action("Control","App",new {id=2,data=Model.ID}) %>">
                <span>Tab2</span></a></li>
            <li><a href="<%:Url.Action("Control","App",new {id=3,data=Model.ID}) %>">
                <span>Tab3</span></a></li>
            <li><a href="<%:Url.Action("Control","App",new {id=4,data=Model.ID}) %>">
                <span>Tab4</span></a></li>
            <li><a href="<%:Url.Action("Control","App",new {id=5,data=Model.ID})%>">
                <span>Tab5</span></a></li>
        </ul>
        <div id="tab1">
        </div>
        <div id="tab2" >
        </div>
        <div id="tab3" >
        </div>
        <div id="tab4" >
        </div>
        <div id="tab5" >
        </div>
        <div id="tab6">
        </div>
    </div>

可以看出,选项卡2到选项卡6包含相同的用户控件。将根据单击的选项卡加载数据。

这里,我的问题是一旦加载标签,点击另一个标签,其他标签内容就会被隐藏。

因为我使用相同的用户控件,所以我遇到了一些问题。

所以,我想删除隐藏(非活动)标签中的内容

请帮助..

1 个答案:

答案 0 :(得分:5)

您可以使用插件中的activate事件清除上一个标签的内容。试试这个:

$('#tabs').tabs({ 
    activate: function(event, ui) {
        ui.oldPanel.empty(); // clear the content of the previous tab
    }
    // other settings, if needed...
});