Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var menuLinks = $('.menuLinkClass'); // now the variable 'menuLinks' is a jQuery object
- var mainDiv = $('.yourMainDivClass'); // same here for 'mainDiv'
- menuLinks.click(navigate) // menuLinks is a jQ object, so it has all of jQuery's methods, like .css(), .attr(), .load(), etc...
- // most jQ methods and functions have whats called a callback. You often seen it written
- // like this: $('.class').click(function(){ with code in here })
- // but that is sloppy
- // here I declare a variable, 'navigate', which 'points' to some function.
- // Above, when a menuLink is clicked, it will call navigate
- var navigate = function(event){
- event.preventDefault(); // stop the action
- var href = $(this).attr('href')
- // this = the HTML element which fired the event, in this case a click. We want the href attribute
- // because that is the link the person clicked on
- mainDiv.load(href + ' .yourMainDivClass') //
- }
- // if you want to add animate to this effect, you would
- // 1. hide the div
- // 2. load() the new content
- // 3. add a callback function to the load() arguments
- // which is triggered after the load is complete
- // and in this callback function unhide div again
Add Comment
Please, Sign In to add comment