вкладки jquery: активное содержимое вкладки не отображается onload

Question

Я использую скрипт вкладки jquery, который я видел где-то. проблема в том, что активная вкладка содержимого по умолчанию не отображается при загрузке страницы. Когда я нажимаю на любую другую вкладку, отображается содержимое, относящееся к активной вкладке, но не загружается. Я даже пытался использовать $(window).load(function() вместо $(document).ready(function(), но никакого эффекта.

здесь код JQuery:

// Wait until the DOM has loaded before querying the document 
      $(document).ready(function(){ 
       $('ul.tabs').each(function(){ 
        // For each set of tabs, we want to keep track of 
        // which tab is active and it's associated content 
        var $active, $content, $links = $(this).find('a'); 

        // If the location.hash matches one of the links, use that as the active tab. 
        // If no match is found, use the first link as the initial active tab. 
        $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
        $active.addClass('active'); 
        $content = $($active.attr('href')); 

        // Hide the remaining content 
        $links.not($active).each(function() { 
         $($(this).attr('href')).hide(); 
        }); 

        // Bind the click event handler 
        $(this).on('click', 'a', function(e){ 
         // Make the old tab inactive. 
         $active.removeClass('active'); 
         $content.hide(); 

         // Update the variables with the new link and content 
         $active = $(this); 
         $content = $($(this).attr('href')); 

         // Make the tab active. 
         $active.addClass('active'); 
         $content.show(); 

         // Prevent the anchor's default click action 
         e.preventDefault(); 
        }); 
       }); 
      }); 

здесь скрипка: http://jsfiddle.net/L5UpJ/ .Please помощь.

Answer 1

Запуск события ручного щелчка для элемента ul.tabs a.active после присоединения событий табуляции.

Как

$('ul.tabs').find('a.active').click(); 

Попробуйте

// Wait until the DOM has loaded before querying the document 
$(document).ready(function(){ 
    $('ul.tabs').each(function(){ 
     // For each set of tabs, we want to keep track of 
     // which tab is active and it's associated content 
     var $active, $content, $links = $(this).find('a'); 

     // If the location.hash matches one of the links, use that as the active tab. 
     // If no match is found, use the first link as the initial active tab. 
     $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]); 
     $active.addClass('active'); 
     $content = $($active.attr('href')); 

     // Hide the remaining content 
     $links.not($active).each(function() { 
      $($(this).attr('href')).hide(); 
     }); 

     // Bind the click event handler 
     $(this).on('click', 'a', function(e){ 
      // Make the old tab inactive. 
      $active.removeClass('active'); 
      $content.hide(); 

      // Update the variables with the new link and content 
      $active = $(this); 
      $content = $($(this).attr('href')); 

      // Make the tab active. 
      $active.addClass('active'); 
      $content.show(); 

      // Prevent the anchor's default click action 
      e.preventDefault(); 
     }); 
    }).find('a.active').click(); 
    //see here the click event is triggered here 
}); 

Демо: Fiddle