**You don't have to change the HTML markup at all.** You can make use of the starts-with [CSS selector][1] (`^=`):

    // All elements with an ID starting with navItem...
    $('[id^="navItem"]').on('click', function() {
        var
            // Get the ID as a string
            id = this.id,
            // Get the last character from the ID
            num = id.charAt(id.length-1)
        ;
        // Hide all elements with an ID starting with content-wrap...
        $('[id^="content-wrap"]').hide();
        // Fade in the relevant ID
        $('#content-wrap'+num).fadeIn(1000);
    });

If we assume "navItem5" is used, here is what the variables would contain:

    id == "navItem5"
    num == "5"
    $('#content-wrap'+num) == "#content-wrap5"

[**JSFiddle example**][2].

This is very basic jQuery. You'd benefit from going through the official jQuery interactive tutorial: http://try.jquery.com.


  [1]: http://www.w3.org/TR/selectors/
  [2]: http://jsfiddle.net/hsDLE/2/