导航标签动态加载/显示

我已经创建了一个php函数，它允许jQuery为Bootstrap药丸/选项卡创建一个选项卡内容div。我可以让它动态加载数据，我只是不能让它显示下面的数据。药丸/标签他们自己显示很好，它的内容，不显示一旦我点击相关标签。触点在所需的选项卡中加载。但是没有给它一个活动类。

function BStabs($divId)
{
    ?>
    <script>
    jQuery(document).ready(function()
    {
        var div = '<?php echo $divId;?>';
        var html = "";
        html += '<div class="tab-content">';
        jQuery('#'+div+' ul').each(function()
        {
            jQuery(this).addClass('nav nav-pills');
        });
        jQuery('#'+div+' ul li a').each(function()
        {
            jQuery(this).attr('data-toggle', 'pill');
            var href = $(this).attr("data-target");
            html += '<div id="'+href+'" role="tabpanel" class="tab-pane"></div>';
            jQuery(this).attr('aria-controls',href);
            jQuery(this).attr('role','tab');
        });
        html += '</div>';
        jQuery('#'+div).append(html);
        var first = '#'+div+' ul li:first a';
        var url = $(first).attr("rel");
        var href = $(first).attr("data-target");
        var pane = $(first);
        $('#'+href).load(url,function(result){      
            pane.tab('show');
        });
        jQuery('.nav-pills > li > a').click(function(e)
        {
            var url = jQuery(this).attr("rel");
            var href = jQuery(this).attr("data-target");
            var pane = jQuery(this);
            jQuery('#'+href).load(url,function(result){      
                pane.tab('show');
            });
        });
    });
    </script>
    <?
}

echo "<div id='"myMessages'">";
echo "<ul>";
echo "<li><a data-target='"todos'" rel='"/URLforAJAXfunction'">A1</a></li>";
echo "<li><a data-target='"asstodos'" rel='"/URLforAJAXfunction'">A2</a></li>";
echo "</ul>";
echo "</div>";
BStabs("myMessages");

我主要从这个Bootply中改编了代码http://www.bootply.com/63891

我还添加了一个JSFiddle链接http://jsfiddle.net/9n6qLt0g/供人们玩，如果他们想。真的需要这个工作。我希望JS创建标签内容div和所有相关的子div，然后成为活动时，点击