Loading content into a div
Option 1:

If your buttons and pages are actually numbered like that, you can simply extract the number from the ID:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load('page' + this.id.match(/\d+$/)[0] + '.php');
});




Option 2:

If that was just an example, but in reality your naming scheme is not so predictable, you can keep an object map with all the appropriate URLs:

var $container = $('#div1'),
    map = {
        button1: 'page1',
        button2: 'page2'
        // and so on...
    };

$('[id^=button]').click(function() {
    $container.load( map[ this.id ] );
});




Option 3:

You could store the page URL in the HTML:

&lt;div id="button1" data-page="page1"&gt;&lt;/div&gt;
&lt;div id="button2" data-page="page2"&gt;&lt;/div&gt;


and then use that in your JavaScript:

var $container = $('#div1');

$('[id^=button]').click(function() {
    $container.load( $(this).attr('data-page') );
});


I personally dislike this method, since it puts behavioral stuff in your HTML.