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');
  });
});

由于

更新作为演示 - 在下面的代码片段中 - 每当链接gos red时，href应该具有#home的值，而反之亦然蓝色（#nav）

＆＃13;

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

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a id="nav-burger" href="#nav">
     
          hello
    
      </a>

＆＃13;

Answer 1

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

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

切换链接HREF

1 个答案: