jquery选项卡：活动选项卡内容不显示onload

Question

我正在使用jquery选项卡脚本我看到了某处。问题在于页面加载时，默认活动选项卡上的内容不显示。当我点击任何其他选项卡时，相对于活动点击选项卡的内容显示出来，但不是onload。我甚至尝试使用$(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/，请您及时的帮助。

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