即使页面刷新，如何保持页面锚点

Question

即使有人刷新页面，我也试图在链接上保留导航锚。 这是我的代码

<nav class='navbar'>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <li class="active"><a href="#home" class="current" id='navshow1'>home</a> </li>
  <li><a href="#whatis" class="current" id='navshow2'>what is this site</a></li>
  <li><a href="#test" class="current" id='navshow3'>test</a> </li>
</nav>

  $('li').click(function(){
   $('li').removeClass("active");
       $(this).addClass("active");
  });

jsFiddle链接： https://jsfiddle.net/p650f8or/

所以如果有人点击“whatis”，地址栏中的 URL 就会变成 mywebsite.com/page#whatis

如果有人刷新页面，我该如何保留？

Answer 1

那么最简单的答案是：

 // this will extract #whatis if you are on eg. https://mywebsite.com/page#whatis. const { hash } = window.location; // or if your prefer the older way var hash = window.location.hash;

要最初获得该值，您可以附加一个 onload 方法并根据包含锚的 href 设置活动列表元素，但这取决于您想要做什么。 希望有帮助。