Guest User

Untitled

a guest
Oct 18th, 2018
93
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.16 KB | None | 0 0
  1. var menuLinks = $('.menuLinkClass'); // now the variable 'menuLinks' is a jQuery object
  2. var mainDiv = $('.yourMainDivClass'); // same here for 'mainDiv'
  3.  
  4. menuLinks.click(navigate) // menuLinks is a jQ object, so it has all of jQuery's methods, like .css(), .attr(), .load(), etc...
  5.  
  6. // most jQ methods and functions have whats called a callback. You often seen it written
  7. // like this: $('.class').click(function(){ with code in here })
  8. // but that is sloppy
  9. // here I declare a variable, 'navigate', which 'points' to some function.
  10. // Above, when a menuLink is clicked, it will call navigate
  11.  
  12. var navigate = function(event){
  13.  
  14. event.preventDefault(); // stop the action
  15.  
  16. var href = $(this).attr('href')
  17.  
  18. // this = the HTML element which fired the event, in this case a click. We want the href attribute
  19. // because that is the link the person clicked on
  20.  
  21. mainDiv.load(href + ' .yourMainDivClass') //
  22.  
  23. }
  24.  
  25.  
  26. // if you want to add animate to this effect, you would
  27. // 1. hide the div
  28. // 2. load() the new content
  29. // 3. add a callback function to the load() arguments
  30. // which is triggered after the load is complete
  31. // and in this callback function unhide div again
Add Comment
Please, Sign In to add comment