切換鏈接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';
  });
});