var content_td=jQuery('.table_load').html();
jQuery('.table_load').html("").css('width','800px').append("</p><div class="content_table">"+content_td+"</div><p>");//помещаем конетент из td class="table_load" в div class='content_table' чтобы можно было использовать .slideDown(), иначе можно удалить эту часть кода 
    
jQuery(".uMenuRoot a, .uMenuV a").click(function(){ 
    jQuery('.befor_td').remove();//удаляем блок с картинкой "Загрузка", нужен если быстро нажимать на разные ссылки 
        
    jQuery(".uMenuRoot a").removeClass("uMenuItemA");//меняем стиль отображения активной ссылки        
    jQuery(this).addClass("uMenuItemA");//меняем стиль отображения активной ссылки 
    var href_a=jQuery(this).attr("href");//заносим в переменную адрес нажимаемой ссылки 
    window.history.pushState(null, null, href_a);//отслеживает и вставляет в адресную строку новую ссылку 
    jQuery('.content_table').before("&nbsp;").fadeOut(400, function(){//добавляем блок с картинкой "Загрузка" и скрываем блок с контентом 
        jQuery('.befor_td').html('</p><p style="margin-top: 100px; text-align: center; font-size: 24px;">Идет ЗАГРУЗКА</p><p style="text-align: center;"><img src="/jquery/images/loader.gif" alt="" /></p><p>').css('width','800px');
        jQuery('.content_table').load(href_a+" .table_load", function(){//загружаем с сервера новый контент  
            jQuery('.table_load').css('width','800px'); 
            jQuery('.befor_td').remove();//удаляем блок с картинкой "Загрузка"
            jQuery('.content_table:hidden').slideDown(300); //открываем блок с новым загруженным контентом 
        }); 
    }); 
    returnfalse;// не даем браузеру перейти по ссылке при клике 
});
window.addEventListener("popstate", function(e){//берет ссылку из строки браузера и по ней загружает контент, как бы переход при клике по верхним стрелкам назад вперед 
    var href_next_back=window.location.pathname;
    jQuery('.table_load').html('</p><p style="margin-top: 300px; text-align: center; font-size: 24px;">Идет ЗАГРУЗКА</p><p style="text-align: center;"><img src="/jquery/images/loader.gif" alt="" /></p><p>'); 
    jQuery('.table_load').load(href_next_back+" .table_load", function(){ 
        jQuery('.table_load').replaceWith(jQuery('.table_load').html());
        window.history.pushState(null, null, href_a); 
	}); 
}); 

Демо (ссылки левого меню "Меню сайта")

Добавить комментарий