Я сделал что-то похожее с сайтом, над которым я работаю. Что вы хотите сделать, это сделать функцию обратного вызова для каждой страницы для вызова $ .load () на главной странице.
См. Следующий код из документации jquery.load () :
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
В вашем конкретном случае вы бы хотели что-то подобное на главной странице test-load.html.
$(document).ready(
function(){
$('li').click(function(){
var showThisContent = this.id;
$('#content').load('test-load-'+showThisContent+'.html', function(){
if (showThisContent == "one"){
//Do logic for test-load-one.html
//Pre-load your images here.
//You may have to assign a class to your anchor tag
//and do something like:
$('a.assignedClass').mouseover(function(){});
$('a.assignedClass').mouseout(function(){});
} //end if
if (showThisContent =="two"){
//Do logic for test-load-two.html here
$('.slideshow').cycle({
fx: 'fade',
speed: 500,
timeout: 0,
next: '.nextSSimg',
prev: '.prevSSimg',
pager: '#SSnav',
cleartype: true,
cleartypeNoBg: true
}); //end .cycle()
} //end if
); //end .load(location, callback function())
}); //end $('li).click()
}); //end $(document).ready()
Теперь, очевидно, я не конвертировал весь ваш код, но здесь происходит следующее: после завершения document.ready будет запущена функция обратного вызова, и теперь такие элементы, как .slideshow, теперь загружаются в DOM, Ваш код обратного вызова будет привязан к ним соответствующим образом.
Вы можете переключить этот код несколькими способами, чтобы получить один и тот же результат (то есть, обернуть 2 $ .load () в условия вместо выполнения условной логики в обратном вызове .load, и / или поместить callbackOne () и callbackTwo () работает над document.ready, а затем вызывает их соответствующим образом), но это ваше предпочтение. Вы должны иметь возможность делать то, что хотите, используя аргумент функции обратного вызова $ .load ().