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中删除所有.nav，然后将其添加回已点击的元素。

请注意，在删除之前，您无需检查某个类是否有类。

jQuery添加+从多个元素中删除类

1 个答案: