jquery content loading question

Question

Hey all, is there anyway to modify this code for me to just show a DIV's section instead of loading each page with an external file?

 <script type="text/javascript">            
        $(document).ready(function(){               
            $('.ezjax').ezjax({ 
                container: '#ezjax_content',
                initial: 'modules/one.html',
                effect: 'slide',
                easing: 'easeOutBounce',
                bind: 'a'
            });             
        });         
 </script> 

 <a class="ezjax" href="modules/one.html">Page One</a>&nbsp;|&nbsp;
 <a class="ezjax" href="modules/two.html">Page Two</a>&nbsp;|&nbsp;
 <a class="ezjax" href="modules/three.html">Page Three</a> 

 <div id="ezjax_content"> 
 <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED -->    
 </div>

This is what i would like to do:

 <a class="ezjax" href="page1">Page One</a>&nbsp;|&nbsp;
 <a class="ezjax" href="page2">Page Two</a>&nbsp;|&nbsp;
 <a class="ezjax" href="page3">Page Three</a> 

 <div id="ezjax_content">
      <div id="page1">
          <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED -->
      </div>

      <div id="page2">
          <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED -->
      </div>

      <div id="page3">
          <!-- THIS IS THE CONTAINER WHERE THE CONTENT WILL BE LOADED -->
      </div>    
 </div>

Any help would be awesome as always :o)

David

Answer 1

My guess is that you really want to use jquery ui tabs:

http://jqueryui.com/demos/tabs/

AJAX doesn't mean cool effects. AJAX by definition implies loading things from an external file. If you don't want to load from an external file, don't use ajax.

If you're interested in learning jquery and doing effects, check out the jquery docs: http://api.jquery.com/category/effects/

Otherwise you can use a plugin like jqueryui to get what you want.

Answer 2

You can load a particular section of a file with

$('#result').load('ajax/test.html #container');

Answer 3

$(function() {
    $('a.ezjax').click(function(e) {
        e.preventDefault();
        var file = this.hash.split('#')[1];

        $('.ezjax').ezjax({
            container: '#' + file,
            initial: 'modules/'+file+'.html',
            effect: 'slide',
            easing: 'easeOutBounce',
            bind: 'a'
        });
    });
}); 

HTML should be like this:

<a class="ezjax" href="#page1">Page One</a>

note the # symbol