jQuery extract url and place into .load()

Question

I'm trying to load external php into a div on click, works fine like this:

$('.tab1').click(function(){
    $('#place').hide(500, function(){
        $('#place').load('example1.inc', function(){
        $('#place').show(500);
        });
    });
});
$('.tab2').click(function(){
    $('#place').hide(500, function(){
        $('#place').load('example2.inc', function(){
        $('#place').show(500);
        });
    });
});

the problem is obvious, so I've been trying to narrow it down with no success. I figured to place links in the tabs (no longer using unique ids for the tabs), and extract the link to place into .load() -

$('.tab').click(function() {
    var location = $('a', this).attr('href');
    $('#place').hide(500, function() {
        $('#place').load(location, function() {
        $('#place').show(500);
        });
    });
});

this is way way off - and load only takes a url as first argument so...

My question is how can I place the appropriately clicked tab's URL into the load method?

btw I'm pretty new at this - is the first way I have it THAT bad? I mean when I have something like 5 tabs its pretty cleat that I'm doing it wrong. Thanks.

Answer 1

the second one is simply loading the link as a page, not into the #place div

This is because you did not prevent the click event on the a by using preventDefault(). Try this:

$('.tab a').click(function(e) {
    e.preventDefault();
    var location = $(this).attr('href'), $place = $('#place');

    $place.hide(500, function() {
        $place.load(location, function() {
            $place.show(500);
        });
    });
});