jQuery在多个元素中添加/移除类

jQuery add + remove classes to/from multiple elements

本文关键字：添加 元素 jQuery      更新时间：2023-09-26

我一直在搜索，不能完全弄清楚如何缩短我为这个网站的导航代码。恐怕我是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);

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

也就是说:当任何.nav被点击时，首先从所有.nav中移除所有.on，然后将其添加回被点击的元素。

相关文章：