带有后退/前进按钮的 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 功能，如果用户单击浏览器中的后退按钮，或者 jQuery #tag在 URL 中读取#tag （每一步都有自己的哈希）

Answer 1

我建议为此使用历史 API。

您需要添加history.pushState(null, null, link.href); 到您的点击功能和处理程序

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

你可以在这里找到教程