Bootstrap 3 Nav Pills Nav Tabs Динамическая загрузка/отображение

Question

У меня есть функция php, которая позволяет jQuery создавать div-tab-content div для таблеток/таблеток Bootstrap. Я могу заставить его загружать данные динамически, я просто не могу заставить его показать данные ниже. Таблетки/вкладки сами по себе демонстрируют прекрасное, содержимое, которое не отображается, когда я нажимаю соответствующую вкладку. Контакт загружается на нужную вкладку. но не дает ему активного класса.

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 и все соответствующие подвыборы затем активировались при нажатии на

Answer 1

ОК, поэтому я играл с этим сейчас. Его немного рубить, я думаю, но тем не менее я никогда получил это работает:

---

JS скрипку, если кто-то хочет посмотреть (улучшить код) http://jsfiddle.net/daza110/9n6qLt0g/3/

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

Что добавил Ive это когда динамические вкладки создаются, им также предоставляется класс fade. Затем, когда загружаются страницы и вкладка автоматически, если при нажатии на вкладку удаляются все классы в «active in» в контейнере div и добавляется класс «активен» на соответствующую вкладку содержимого.