jQuery add + remove classes to/from multiple elements
<p>I've been searching and can't quite figure out how to shorten this code I've made for this site's navigation.
I'm afraid I'm new to Javascript and jQuery. Thanks in advance.</p>

<p>The page never reloads, so I've done the following to display what page is currently being viewed:</p>

<p>The menu:</p>

<pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#" class="nav on" id="navitem1" onclick="showMiddle(1);"&gt;item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="nav" id="navitem2" onclick="showMiddle(2);"&gt;item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="nav" id="navitem3" onclick="showMiddle(3);"&gt;item 3&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="nav" id="navitem4" onclick="showMiddle(4);"&gt;item 4&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" class="nav" id="navitem5" onclick="showPhotos(5);"&gt;item 5&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>The rest:</p>

<pre><code>function changeClass1() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem1").addClass('on');
    }
};
function changeClass2() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem2").addClass('on');
    }
};
function changeClass3() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem3").addClass('on');
    }
};
function changeClass4() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem4").addClass('on');
    }
};
function changeClass5() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem5").addClass('on');
    }
};
function changeClass6() 
{
    if ($(".nav").hasClass('on'))
    {
        $('.nav').removeClass('on');
        $("#navitem6").addClass('on');
    }
};

$("#navitem1").click(changeClass1);
$("#navitem2").click(changeClass2);
$("#navitem3").click(changeClass3);
$("#navitem4").click(changeClass4);
$("#navitem5").click(changeClass5);
$("#navitem6").click(changeClass6);
</code></pre>
