jquery bind an event to a class, or something to the same effect?

I'd like to bind an event to a class, or any alternative to the redundant code I posted below. Any ideas?

thanks, mna

(function(){
    $( "button", "body" ).button();
    var submenu=false;

    $( "#about" ).click(function() {
    $( "#content" ).fadeOut(1000);
    $( "#content" ).load('about.html');
    $( "#content" ).fadeIn(1000);
     });

    $( "#community" ).click(function() {
    $( "#content" ).fadeOut(1000);
     $( "#content" ).load('community.html');
     $( "#content" ).fadeIn(1000);
     });

     $( "#store" ).click(funct开发者_JS百科ion() {
     $( "#content" ).fadeOut(1000);
     $( "#content" ).load('store.html');
     $( "#content" ).fadeIn(1000);
     });

    $( "#projects" ).click(function() {
    $( "#content" ).fadeOut(1000);
    $( "#content" ).load('projects.html');
    $( "#content" ).fadeIn(1000);
    });
});

---

Either use the multiple selector

$("#about, #community, #store, #projects").click(function() {
    $("#content").fadeOut(1000)
                 .load(this.id + '.html')
                 .fadeIn(1000);
});

or give these elements the same class and use

$('.classname').click(...);

Update:

I've seen that @pointy had a good point, but he deleted his answer: You probably want for fadeOut, load, fadeIn to occur one after another. Then you have to put them in callbacks:

$("#content").fadeOut(1000, function() {
   $(this).load(this.id + '.html', function() {
       $(this).fadeIn(1000);
   })
});

See their documentation for more information.

---

How about this?

Set the class load-content to all of the elements that you want to bind the click event to.

(function(){
    $("button, body").button();
    var submenu=false;

    $(".load-content").click(function() {
        $("#content").fadeOut(1000).load(this.id+'.html').fadeIn(1000);
    });
});