如何卸载隐藏/不活动的jquery ui选项卡？ [英] How to unload jquery ui tabs that are hidden/ not active?

问题描述

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

I am using Jquery UI tabs in my asp.net mvc web application.

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

I have total of 6 tabs. Each tab contains a user control.

我使用这样的ajax动态地将内容加载到每个选项卡中：

I am dynamically loading the contents into each tab using ajax like this:

 <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包含相同的用户控件。数据将根据点击的标签加载。

As one can see, the tab 2 to tab 6 contains the same user control. The data will be loaded based on tab clicked.

这里，我的问题是加载标签后，点击另一个标签，其他标签内容只是隐藏。

here, my problem is once the tab is loaded , clicked on another tab , the other tab contents are just hidden.

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

Since, i am using the same user controls , i am facing some problems.

所以，我想要从隐藏的选项卡中删除内容（不活动）

So, i want to remove the content from the tabs which are hidden ( not active )

请帮助..

推荐答案

您可以使用插件中的 activate 事件来清除上一个选项卡的内容。试试这个：

You can use the activate event in the plugin to clear the contents of the previous tab. Try this:

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

这篇关于如何卸载隐藏/不活动的jquery ui选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！