Question

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.

The page never reloads, so I’ve done the following to display what page is currently being viewed:

The menu:

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

The rest:

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);

Answer 1

$(".nav").on("click", function () {
    $(".nav").removeClass("on");
    $(this).addClass("on");
});

That says: when any .nav is clicked, first remove all .on‘s from all .nav‘s, then add it back to the element that was clicked.

Note that you don’t need to check if something has a class before removing it.