javascript - 切换链接 HREF

Question

我有一个通过纯 CSS 显示的菜单面板 - 使用 #nav - 它由一个简单的按钮控制

<a id="nav-burger" href="#nav">
     <span></span>
     <span></span>
     <span></span>
     <span></span>
</a>

我想在点击时切换 href 以显示 #home - 谁能建议如何执行此操作？

我正在使用这种格式，但我的语法有点困惑，必须有一个更简单的方法!

$(document).ready(function(){
  $('#nav-burger').click(function(){
    $(this).toggleClass('open');
     $(this).attr('href',$(this).attr('href') == '#nav' ? '#nav' : '#home');
  });
});

谢谢

更新作为演示 - 在下面的代码片段中 - 每当链接变为红色时，href 的值应为 #home，反之亦然为蓝色 (#nav)

$(document).ready(function(){
  $('#nav-burger').click(function() {
  $(this).toggleClass('open').attr('href', function(_, currHref) {
    return currHref === '#nav' ? '#home' : '#nav';
  });
});
});

a{color:blue}
a.open{color:red}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="nav-burger" href="#nav">
     
          hello
    
      </a>

Answer 1

您可以使用attr(attributeName, function)并链接方法

$('#nav-burger').click(function() {
  $(this).toggleClass('open').attr('href', function(_, currHref) {
    return currHref === '#nav' ? '#home' : '#nav';
  });
});