Javascript 如何使用jquery清除不处于活动状态的内容？

我正在为我的项目使用jQueryUI选项卡。请检查html代码

<div id="tabs">
    <ul>
        <li><a href="#tabs-1" id="preload" class="load_cont" rel="tabs-1||general">General</a></li>
        <li><a href="#tabs-2" class="load_cont" rel="tabs-2||admin_products">Admin Products</a></li>
        <li><a href="#tabs-3" class="load_cont" rel="tabs-3||admin_category">Admin Category</a></li>
        <li><a href="#tabs-4" class="load_cont" rel="tabs-4||admin_others">Others(Admin)</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
    <div id="tabs-4"></div>
</div> 

当我单击一个选项卡时，我使用ajax获得表单，这很好。检查下面取自phtml文件的js代码

<script type="text/javascript">
    $(function(){

        // Tabs
        $('#tabs').tabs();                        
        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
        function() { $(this).addClass('ui-state-hover'); }, 
        function() { $(this).removeClass('ui-state-hover'); }             
    );

        $('.load_cont').click(function()
        {
            var groupname;
            var id = $(this).attr('rel');
            var gnameArr = id.split('||');
            groupname = gnameArr[1];

            //alert(gnameArr[1]);
            var url = <?php echo BASE_URL; ?> + '/admin/settings/getqtips/gname/'+groupname;
            //alert(id);
            $.ajax({
                type:'POST',
                dataType:'json',
                url:url+'/math/'+Math.random(),
                data:'',
                success:function(response)
                {   
                    if(response.MSG == 'DONE')
                    {
                        $("#"+gnameArr[0]).html(response.TPL);
                        $('div#'+gnameArr[0]+' #gname').val(groupname);
                    }
                }
            });                   
        }    
    );              
    });
    $(function(){
        $('a#preload').click();
    })
</script>

$（函数（）{
//标签
$（“#tabs”）.tabs（）；
//静态小部件上的悬停状态
$（“#对话框#链接，ul#图标li”）。悬停(
函数（）{$（this.addClass（'ui-state-hover'）；}，
函数（）{$（this）.removeClass（'ui-state-hover'）；}
);
$（'.load_cont'）。单击（函数（）
{
var-groupname；
var id=$（this.attr（'rel'）；
var gnameArr=id.split（“| |”）；
groupname=gnameArr[1]；
//警报（gnameArr[1]）；
var url=+'/admin/settings/getqtips/gname/'+groupname；
//警报（id）；
$.ajax({
类型：'POST'，
数据类型：'json'，
url:url+'/math/'+math.random（），
数据：“”，
成功：功能（响应）
{   
如果（response.MSG==“完成”）
{
$（“#”+gnameArr[0]）.html（response.TPL）；
$（'div#'+gnameArr[0]+'#gname'）.val（groupname）；
}
}
});                   
}    
);              
});
$（函数（）{
$（'a#preload'）。单击（）；
})

我的要求是，每当我点击相应的选项卡时，我需要清除其他选项卡中的html。也就是说，如果我单击选项卡2，其他选项卡（选项卡1、选项卡3、选项卡4）的内容应该是清晰的。这一个保存了我在zend上的验证

---

请给出建议。

在成功函数中清空所有其他div

$('div[id^="tabs-"]').each(function(){  //search for all divs which id starts with 'tabs-'
  if (this.id != gnameArr[0]) { //if this is not clicked one
    $(this).empty(); //clear its content
  }
});

或与

---

或者，您可以使用相同的类设置容器元素，例如

.container

// Clear all container before you set the new one.
$('.container').html('');

---

像这样的怎么样：

$('.load_cont').click(function(){
     $('.load_cont').not($(this)).each(function(i,el){
          $($(el).attr('href')).empty();
     });
});

---

选择不是所选div的div，然后将其全部清除：

$('#tabs > div:not(#' + gnameArr[0] + ')').empty();

---

您是否有id选项卡的受限div，或者这些是动态的

$('#tabs > div:not(#' + gnameArr[0] + ')').empty();