jQuery添加+從多個元素刪除類

Question

我一直在搜索，不能完全弄清楚如何縮短我爲這個網站的導航所做的代碼。 恐怕我是Javascript和jQuery的新手。提前致謝。

頁面重新加載從來沒有，所以我做了以下，顯示當前正在查看哪個頁面：

菜單：

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

其餘：

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

這就是說：當點擊任何.nav時，首先刪除所有.on's全部.nav's，然後將其添加回單擊的元素。

請注意，在刪除它之前，您不需要檢查是否有某個類。