html如何动态添加tab，在tab中显示指定的内容

weixin_39723769 2017-08-20 07:22:23

<div class="am-tabs" data-am-tabs="{noSwipe: 1}" id="doc-tab-demo-1">
<ul class="am-tabs-nav am-nav am-nav-tabs">
<li class="am-active"><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">流浪</a></li>
<li><a href="javascript: void(0)">再流浪</a></li>
</ul>

<div class="am-tabs-bd">
<div class="am-tab-panel am-active">
第一个
</div>
<div class="am-tab-panel">
第二个
</div>
<div class="am-tab-panel">
第三个
</div>
</div>
</div>
<button type="button" class="am-btn am-btn-primary js-append-tab">插入 Tab</button>
<script>
$(function() {
var tabCounter = 0;
var $tab = $('#doc-tab-demo-1');
var $nav = $tab.find('.am-tabs-nav');
var $bd = $tab.find('.am-tabs-bd');

function addTab() {
var nav = '<li><span class="am-icon-close"></span><a href="javascript: void(0)">标签' + tabCounter + '</a></li>';
var content = '<div class="am-tab-panel">动态插入的标签内容' + tabCounter + '</div>';

$nav.append(nav);
$bd.append(content);
tabCounter++;
$tab.tabs('refresh');
}

// 动态添加标签页
$('.js-append-tab').on('click', function() {
addTab();
});

// 移除标签页
$nav.on('click', '.am-icon-close', function() {
var $item = $(this).closest('li');
var index = $nav.children('li').index($item);

$item.remove();
$bd.find('.am-tab-panel').eq(index).remove();

$tab.tabs('open', index > 0 ? index - 1 : index + 1);
$tab.tabs('refresh');
});
});
</script>
用的是amazeui的框架，为什么点击“插入tab”后添加的“标签”没有显示内容呢？如果我想显示的是一个指定的html，代码该如何改呢？