如何缩短此加载jQuery？

I'm pretty good with jQuery but when I get to stuff like this I need a little help.

我对jQuery非常好,但是当我得到这样的东西时,我需要一些帮助。

So I want to shorten this code:

所以我想缩短这段代码:

$(function() {
$('#experience_nav').click(function() {
    $('#contentWrap').load('files.html #content_experience', function() {
        $(this).hide().fadeIn();
        $('#content_experience').siblings().fadeOut();
    });

    return false;
});
$('#aboutme_nav').click(function() {
    $('#contentWrap').load('files.html #content_aboutme', function() {
        $(this).hide().fadeIn();
        $('#content_aboutme').siblings().fadeOut();
    });

    return false;
});
$('#recentclients_nav').click(function() {
    $('#contentWrap').load('files.html #content_recentclients', function() {
        $(this).hide().fadeIn();
        $('#content_recentclients').siblings().fadeOut();
    });

    return false;
});
$('#contactme_nav').click(function() {
    $('#contentWrap').load('files.html #content_contactme', function() {
        $(this).hide().fadeIn();
        $('#content_contactme').siblings().fadeOut();
    });

    return false;
});

});

So that I don't have to basically keep calling the same thing for each different instance.

所以我基本上不必为每个不同的实例调用相同的东西。

Any Help at all is great! Even just telling me it can't be done! :-)

任何帮助都很棒!即使只是告诉我它无法完成! :-)

2 个解决方案

#1

// All <a>s wich the ID ends with '_nav'
$('a[id$="_nav"]').click(function() {
    var nav = $(this).attr('id').replace('_nav', '');

    $('#contentWrap').load('files.html #content_' + nav, function() {
        $(this).hide().fadeIn();
        $('#content_' + nav).siblings().fadeOut();
    });

    return false;
})

#2

Try this, taking advantage of your naming scheme:

试试这个,利用你的命名方案:

$('#experience_nav, #aboutme_nav, #recentclients_nav, #contactme_nav').click(function() {
    var id = '#content_' + $(this).attr('id').replace("_nav","");
    $('#contentWrap').load('files.html ' + id, function() {
        $(this).hide().fadeIn();
        $(id).siblings().fadeOut();
    });
    return false;
});

Alternatively, as lightweight as possible since it's hooked up multiple times:

或者,尽可能轻量级,因为它连接了多次:

$('[id$=_nav]').live('click', function() {
    var id = '#content_' + $(this).attr('id').replace("_nav","");
    $('#contentWrap').load('files.html ' + id, function() {
        $(this).hide().fadeIn();
        $(id).siblings().fadeOut();
    });
    return false;
});