Question

首先，我使用以下代码创建一个标签：

<div id="statsTabs" style="width:100%; height:100%">
    <ul>
        <li><a href="#f-campaign"><span>广告系列</span></a></li>
        <li><a href="#f-adgroup"><span>广告组</span></a></li>
   </ul>
</div>
<div id="f-campaign">...</div>
<div id="f-adgroup">...</div>
<script>
   $(document).ready(function() {
     $("#statsTabs").tabs();
   });
</script>

每件事都运作良好，但是当我尝试下面的代码时，我遇到了一些问题：

$("#statsTabs").tabs( "remove" , 0);
$("#statsTabs").tabs("add", '#f-campaign', "广告系列" , 0);

出现标签为“广告系列”的新标签，但其中没有内容，为什么？由于第一个代码段获得了＃f-campaign的内容。

Answer 1

当您调用删除功能时，它会删除选项卡和内容。

这就是你无法再添加它的原因。你需要再次构建它才能做到这一点。

我用console.log()制作了一个JS小提琴，演示了这一点：http://jsfiddle.net/Allan/2YcBh/

您可以使用这样的回调函数来避免这种情况：

$(document).ready(function() {
    $("#statsTabs").tabs({
       remove: function(event, ui) {
        // Back up the content here, or simply move the tab so that you can add it again later.
       }
    });
    $('input').click(function() {
        $("#statsTabs").tabs( "remove" , 0);
        console.log($('#f-campaign'));
        $("#statsTabs").tabs("add", '#f-campaign', "广告系列" , 0);
    });
});

Answer 2

这：$("#statsTabs").tabs( "remove" , 0); 同时删除li和关联的div，因此当您再次添加标签时，它没有预期的内容。

为什么在jquery中添加新选项卡时没有内容？

2 个答案: