Loading wordpress posts after user clicks anchor - wordpress

Question

This is my tab menu, where user can select tab
<div id="slider-menu" class="row">
<div class="span12">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Latest events<div class="triangle"></div></li>
<li>Our champions</li>
<li>We have puppies!</li>
</ul>
</div>
</div>
And there are my tabs, in which content is loaded when page loads
<div class="tab-content">
<div class="tab-pane active" id="home">
<img src="<?php bloginfo('template_url'); ?>/img/slider.png" />
<div class="span12">
<?php
query_posts('cat=7');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</div>
<div class="tab-pane" id="profile">
<img src="<?php bloginfo('template_url'); ?>/img/slider.png" />
<div class="span12">
<?php
query_posts('cat=8');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</div>
<div class="tab-pane" id="messages">
<img src="<?php bloginfo('template_url'); ?>/img/slider.png" />
<div class="span12">
<?php
query_posts('cat=9');
if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h3><?php the_title(); ?></h3>
<?php the_content(); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
</div>
</div>
When there will be a lot of posts, it will take page to load too long, so my basic idea is to load all posts to the first tab when page loads, and load posts to another tab when user selects it.
I struggle how to combine wp posts loop and ajax to load posts when user clicks specific tab.
Thank you for your help in advance.

Answer 1

$.ajaxSetup({cache:false});
$('#myTab li').click(function(){
var cat_id = $(this).children().attr('rel');
$.get('location.href' + cat_id, function(data) {
$('#' + cat_id).html(data);
return false;
});
So I output category id to anchor rel attribute, then I add click event handler in which I call .get function. After all, I output data.