jQuery AJAX navigation


/ Published in: JavaScript
Save to your folder(s)



Copy this code and paste it in your HTML
  1. $(document).ready(function() {
  2.  
  3. // Check for hash value in URL
  4. var hash = window.location.hash.substr(1);
  5. var href = $('#nav li a').each(function(){
  6. var href = $(this).attr('href');
  7. if(hash==href.substr(0,href.length-5)){
  8. var toLoad = hash+'.html #content';
  9. $('#content').load(toLoad)
  10. }
  11. });
  12.  
  13. $('#nav li a').click(function(){
  14.  
  15. var toLoad = $(this).attr('href')+' #content';
  16. $('#content').hide('fast',loadContent);
  17. $('#load').remove();
  18. $('#wrapper').append('<span id="load">LOADING...</span>');
  19. $('#load').fadeIn('normal');
  20. window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
  21. function loadContent() {
  22. $('#content').load(toLoad,'',showNewContent())
  23. }
  24. function showNewContent() {
  25. $('#content').show('normal',hideLoader());
  26. }
  27. function hideLoader() {
  28. $('#load').fadeOut('normal');
  29. }
  30. return false;
  31.  
  32. });
  33. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.