Подрузка контента из нескольких файлов по клику.

[MasterDmx]

Доброго времени суток.
Есть скрипт:

$(document).ready(function(){
    getLoad('/documentation.htm' , '#documentation');
    getLoad('/top_predlojeiy.htm' , '#top_predlojeiy');
    getLoad('/tpl/topmenu23.htm' , '#topmenu23');
    getLoad('/text_na_static.htm' , '#text_na_static');
});

function getLoad (urlLoad, container) {
$.ajax({
	url: urlLoad,
	cache: false,
	beforeSend: function() {
	$(container).html('');
	},
	success: function(html){
	$(container).html(html);
	}
});
}

Он динамически подгружает контент из файлов в определенные дивы. К примеру, в div id="documentation" будет подгружен контент из файла "documentation.htm" и так далее. Причем все это происходит при загрузке страницы.

Необходимо модернизировать скрипт таким образом, что бы скрипт подгружал контент в один див (Пусть это будет div id="centent") но с разных файлов и по клику по ссылке.

К примеру, есть вот такое меню:

<a href="#" id="documentation">Документация</a>
<a href="#" id="top_predlojeiy">Топ предложений</a>
<a href="#" id="topmenu23">Том меню</a>
<a href="#" id="text_na_static">Текст на статику</a>

У каждого пункта есть свой ID. При нажатии на ссылку "Документация" скрипт подружает контент в div id="content" из файла documentation.htm
И так далее.

Перерыл кучу сайтов и форумов, но безрезультатно. Очень надеюсь на вашу помощь. Заранее благодарен.

[Deff]

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".link-load a").click(function () {
      $("#divLoad").load($(this)[0].href);
       return false;
    });
  });
</script>


<div id="divLoad"></div>

<div class="link-load">
 <pre>
 <a href="/documentation.htm">Документация</a>
 <a href="/top_predlojeiy.htm">Топ предложений</a>
 <a href="/topmenu23.htm">Том меню</a>
 <a href="/text_na_static">Текст на статику</a>
 </pre>
</div>

[MasterDmx]

Спасибо! Все отлично работает! Очень благодарен.

Не подскажите еще как сделать так, что бы контент прогружался через определенное время, и пока он не прогружен выводился индикатор загрузки?

На скока я понимаю нужно использовать setTimeout, а вместо индикатора подойдет простое gif изображение.

Подскажите пожалуйста как это реализовать.

[JustCrazy]

думается мне вот так:

<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $(".link-load a").click(function () {
       $("#loader").html("<img src='...gif'>");
       setTimeout(function(){
         $("#loader").hide();
         $("#divLoad").load($(this)[0].href);
       },3000);
       return false;
    });
  });
</script>
 
<div id="loader"></div> 
<div id="divLoad"></div>
 
<div class="link-load">
 <pre>
 <a href="/documentation.htm">Документация</a>
 <a href="/top_predlojeiy.htm">Топ предложений</a>
 <a href="/topmenu23.htm">Том меню</a>
 <a href="/text_na_static">Текст на статику</a>
 </pre>
</div>

[danik.js]

Перед вызововом $().load показать прелоадер, а в функции, переданной вторым параметром в $().load скрыть его:

$("#loader").show();
$("#divLoad").load($(this)[0].href, function(){ $("loader").hide() });