Assuming you're using an expressive structure such as:
<nav>
<a href="#content-wrap1" id="navItem1" class="navItem">One</a>
<a href="#content-wrap2" id="navItem2" class="navItem">Two</a>
<a href="#content-wrap3" id="navItem3" class="navItem">Three</a>
</nav>
<div id="content-wrap1" class="content-wrap">...</div>
<div id="content-wrap2" class="content-wrap">...</div>
<div id="content-wrap3" class="content-wrap">...</div>
You can then toggle the display of the content-wrap
items in a short, expressive manner.
$('.navItem').on('click', function (e) {
$('.content-wrap').hide();
$($(this).attrprop('href''hash')).fadeIn(1000);
e.preventDefault();
});
This does suggest changing the HTML, but only in ways that make the content semantic.