Question

我的网页上有一些步骤，可点击

进行滑动/切换

这是我的js：

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

这是我的HTML

 <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

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

1 个答案: