2014-01-30 66 views
0

我已經在我的網頁一些步驟與滑動點擊jQuery的.slideToggle與後退/前進按鈕

這裏/切換是我的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的功能列出,如果用戶點擊返回按鈕在他的瀏覽器中,或者如果jQuery閱讀#標籤在URL中(每一步都有自己的散列)

+0

可能重複[如何#hash點擊添加到一個元素( http://stackoverflow.com/questions/7891370/how-to-add-hash-clicking-to-an-element) – Huangism

回答

0

我建議使用這個歷史API。

您將需要添加history.pushState(null, null, link.href);到點擊功能,以及處理器

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

你可以找到一個教程here