切换链接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';
  });
});