Загрузите контент через ajax, нажав и загрузите?

Question

У меня есть страница, где у меня есть меню, которое делает вызов ajax при нажатии и загружает контент в div с небольшой анимацией с нижним колонтитулом. (Как можно увидеть здесь:. http://perishablepress.com/slide-fade-content/ мне интересно, если есть способ, чтобы иметь первый пункт меню будет загружен уже при открытии страницы Мой код:

<ul> 
<li><a class="blog" href="#blog">Blog</a></li> 
<li><a class="contact" href="#contact">Contact</a></li> 
</ul> 

и сценарий:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script>jQuery(document).ready(function($) { 
$('.blog').on('click', function() { 
    var href = $(this).attr('href'); 
    if ($('#ajax').is(':visible')) { 
     $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty(); 
    } 
    $('#ajax').css({ display:'block' }).animate({ height:'200px' },function() { 
     $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); 
     $('#ajax').load('blog.php ' + href, function() { 
      $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#0e0e0e' }); }); }); }); });  



    jQuery(document).ready(function($) { 
$('.contact').on('click', function() { 
    var href = $(this).attr('href'); 
    if ($('#ajax').is(':visible')) { 
     $('#ajax').css({ display:'block' }).animate({ height:'0' }).empty(); 
    } 
    $('#ajax').css({ display:'block' }).animate({ height:'600px' },function() { 
     $('#loader').css({ border:'none', position:'relative', top:'24px', left:'48px', boxShadow:'none' }); 
     $('#ajax').load('contact.php ' + href, function() { 
      $('#ajax').hide().fadeIn('slow').colorFade({ 'fadeColor': '#0e0e0e' }); 
     }); 
    }); 
}); 
}); 

так что теперь я должен нажать «блог» или «контакт», чтобы иметь нагрузку контента, но я хотел бы иметь «блог» загружается по умолчанию при открытии страницы

а также: есть способ иметь не только контент, но и другую версию загруженного jquery, давайте скажем, когда я нажимаю «контакт», и моя контактная форма работает с другой версией jquery.

Я надеюсь, что кто-то может помочь супер-нубу, как я! Спасибо, много!

Answer 1

Просто введите событие щелчка вручную для элемента .blog, используя .click() или .trigger('click').

jQuery(document).ready(function ($) { 
    $('.blog').on('click', function() { 
     var href = $(this).attr('href'); 
     if ($('#ajax').is(':visible')) { 
      $('#ajax').css({ 
       display: 'block' 
      }).animate({ 
       height: '0' 
      }).empty(); 
     } 
     $('#ajax').css({ 
      display: 'block' 
     }).animate({ 
      height: '200px' 
     }, function() { 
      $('#loader').css({ 
       border: 'none', 
       position: 'relative', 
       top: '24px', 
       left: '48px', 
       boxShadow: 'none' 
      }); 
      $('#ajax').load('blog.php ' + href, function() { 
       $('#ajax').hide().fadeIn('slow').colorFade({ 
        'fadeColor': '#0e0e0e' 
       }); 
      }); 
     }); 
    }).click(); // trigger the click event for the blog event here 
});