Javascript 引导3导航标签动态加载/显示导航标签

我创建了一个php函数，它允许jQuery为引导程序/选项卡创建一个选项卡内容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>
    <?
}

函数BStabs（$divId）
{
?>
jQuery（文档）.ready（函数（）
{
var div=''；
var html=“”；
html+=''；
jQuery（'#'+div+'ul'）。每个（函数（）
{
jQuery（this）.addClass（'nav-nav-pills'）；
});
jQuery（'#'+div+'ulli a'）。每个（函数（）
{
jQuery（this.attr（'data-toggle'，'pill'）；
var href=$（this.attr（“数据目标”）；
html+=''；
jQuery（this.attr（'aria-controls'，href）；
jQuery（this.attr（'role'，'tab'）；
});
html+=''；
jQuery（'#'+div）.append（html）；
var first='#'+div+'ul li:first a'；
var url=$（第一个）.attr（“rel”）；
var href=$（第一个）.attr（“数据目标”）；
变量窗格=$（第一个）；
$（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
});
jQuery（'.nav pills>li>a'）。单击（函数（e）
{
var url=jQuery（this.attr（“rel”）；
var href=jQuery（this.attr（“数据目标”）；
var pane=jQuery（this）；
jQuery（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
});
});
});
好吧，我已经玩了一段时间了。我想这有点像黑客，但我还是让它工作了：


如果有人想看，JS fiddle（改进代码）

jQuery（文档）.ready（函数（）
{
var div='myMessages'；
var html=“”；
html+=''；
jQuery（'#'+div+'ul'）。每个（函数（）
{
jQuery（this）.addClass（'nav-nav-pills'）；
});
jQuery（'#'+div+'ulli a'）。每个（函数（）
{
jQuery（this.attr（'data-toggle'，'pill'）；
var href=jQuery（this.attr（“数据目标”）；
html+=''+href+'
'；
jQuery（this.attr（'aria-controls'，href）；
jQuery（this.attr（'role'，'tab'）；
});
html+=''；
jQuery（'#'+div）.append（html）；
var first='#'+div+'ul li:first a'；
var url=jQuery（first.attr（“rel”）；
var href=jQuery（first.attr（“数据目标”）；
var pane=jQuery（第一）；
jQuery（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
jQuery（'#'+href）.addClass（“活动中”）；
});
jQuery（'.nav pills>li>a'）。单击（函数（e）
{
jQuery（'#'+div+'.tab content>div'）。每个（函数（e）
{
jQuery（this）.removeClass（“activein”）；
});
var url=jQuery（this.attr（“rel”）；
var href=jQuery（this.attr（“数据目标”）；
var pane=jQuery（this）；
jQuery（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
jQuery（'#'+href）.addClass（“活动中”）；
});
});
});

我添加的是，当创建动态选项卡时，它们也会被赋予淡入淡出类。然后，当页面加载并自动选择选项卡时，或者当单击选项卡时，它会删除容器div中“active in”上的所有类，并添加“active in”类到相关的内容选项卡。
好的，我已经玩了一段时间了。我认为这有点像黑客，但我还是让它工作了：


如果有人想看，JS fiddle（改进代码）

jQuery（文档）.ready（函数（）
{
var div='myMessages'；
var html=“”；
html+=''；
jQuery（'#'+div+'ul'）。每个（函数（）
{
jQuery（this）.addClass（'nav-nav-pills'）；
});
jQuery（'#'+div+'ulli a'）。每个（函数（）
{
jQuery（this.attr（'data-toggle'，'pill'）；
var href=jQuery（this.attr（“数据目标”）；
html+=''+href+'
'；
jQuery（this.attr（'aria-controls'，href）；
jQuery（this.attr（'role'，'tab'）；
});
html+=''；
jQuery（'#'+div）.append（html）；
var first='#'+div+'ul li:first a'；
var url=jQuery（first.attr（“rel”）；
var href=jQuery（first.attr（“数据目标”）；
var pane=jQuery（第一）；
jQuery（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
jQuery（'#'+href）.addClass（“活动中”）；
});
jQuery（'.nav pills>li>a'）。单击（函数（e）
{
jQuery（'#'+div+'.tab content>div'）。每个（函数（e）
{
jQuery（this）.removeClass（“activein”）；
});
var url=jQuery（this.attr（“rel”）；
var href=jQuery（this.attr（“数据目标”）；
var pane=jQuery（this）；
jQuery（'#'+href）.load（url，函数（结果）{
pane.tab（'show'）；
jQuery（'#'+href）.addClass（“活动中”）；
});
});
});

我添加的是，当创建动态选项卡时，它们也会被赋予淡入淡出类。然后，当页面加载并自动选择选项卡时，或者当单击选项卡时，它会删除容器div中“active in”上的所有类，并将“active in”类添加到相关的内容选项卡中

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");

jQuery(document).ready(function()
{
    var div = 'myMessages';
    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 = jQuery(this).attr("data-target");
        html += '<div id="'+href+'" role="tabpanel" class="tab-pane fade"><p>'+href+'</p></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 = jQuery(first).attr("rel");
    var href = jQuery(first).attr("data-target");
    var pane = jQuery(first);

    jQuery('#'+href).load(url,function(result){      
        pane.tab('show');
        jQuery('#'+href).addClass("active in");
    });
    jQuery('.nav-pills > li > a').click(function(e)
    {
        jQuery('#'+div+' .tab-content > div').each(function(e)
        {
            jQuery(this).removeClass("active in");
        });
        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');
            jQuery('#'+href).addClass("active in");
        });
    });
});