带有后退/前进按钮的 jQuery .slideToggle

Question

我的网页上有一些步骤可以通过点击滑动/切换

代码：

jQuery('.lestep1').click(function() {
  jQuery(".content").slideToggle();
  jQuery(".step1").slideToggle();
});


jQuery('.lestep2').click(function() {
  jQuery(".step1").slideToggle();
  jQuery(".step2").slideToggle();
});


jQuery('.lestep3').click(function() {
  jQuery(".step3").slideToggle();
  jQuery(".step2").slideToggle();
});



jQuery('.lestep4').click(function() {
  jQuery(".step4").slideToggle();
  jQuery(".step3").slideToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step1" id="step1">
  <h1>Step 2</h1>
  <p>Please let us know your employment history from the last 5 years. The most recent employer listed first If you are newly qualified, include your pre- registration year as your most recent employer.</p>


  <div class="navigation">
    <a href="#step1" class="custombutton"> <span class="awsome" style="margin-right: 10px;">&#xf067;</span> Add New</a>
    <a href="#mainLocum" class="lestep1" style="background: #858585;"> <span class="awsome" style="margin-right: 10px;"> &#xf060; </span> Prevstep</a>
    <a href="#step2" class="lestep2"> <span class="awsome" style="margin-right: 10px;">&#xf061;</span> Next step</a>
  </div>
</div>

<div class="step2" id="step2">
  <h1>Step 3</h1>
  <p>Please answer a few questions to get us know you better</p>

  <div class="navigation">
    <a href="#step2" class="lestep2" style="background: #858585;"> <span class="awsome" style="margin-right: 10px;"> &#xf060; </span> Prevstep</a>
    <a href="#step3" class="lestep3"> <span class="awsome" style="margin-right: 10px;">&#xf061;</span> Next step</a>
  </div>
</div>

我想知道如果用户在他的浏览器中点击后退按钮，或者如果 jQuery 在 URL 中读取 #tag（每一步都有自己的哈希），我是否可以在列表中添加一些 jQuery 功能

Answer 1

我建议为此使用 History API。

您需要将history.pushState(null, null, link.href); 添加到您的点击函数和一个处理程序

window.addEventListener("popstate", function(e) {
    //do some logic here
});

你可以找到教程here