jQuery的後退按鈕顯示div元素

Question

這裏是我的網頁格式，它是在同一頁

<!-- login page--> 
<div id="login"> 
    <!-- login page content --> 
</div> 

<!-- registration page content --> 
<div id="registrationMenu" data-position="inline"> 
    <div id="registrationInner" style="display:none;">  
     <div data-position="inline" data-role="header" 
      data-add-back-btn="true" class="ui-header ui-bar-a" 
      role="banner"> 
      <a href="#login" data-icon="delete" >Back</a>       
      <h1 class="ui-title" role="heading" aria-level="1">Registration</h1>   
     </div> 
    </div> 

如何顯示的登錄頁面內容時，點擊註冊的後退按鈕和隱藏的註冊頁面內容，上述代碼不起作用，並且

data-rel="back" 

它不工作，因爲它會回到上一頁？請幫忙。

Answer 1

$('a#login').on('click', function(e) { 
    e.preventDefault(); // prevent the page navigation that you are facing 
    $('#registrationMenu').hide(300, function() { // hide the registration page 
     $('#login').show(300); // show the login page after hide 
    }); 
}); 

Answer 2

測試它生活的jsfiddle：http://jsfiddle.net/ajaypatel_aj/BsqVA/2/ 您的HTML代碼，我只是說回去類在後面的文本鏈接

<!-- login page--> 
<div id="login" style="display:none;"> 
    login page content 
</div> 

<!-- registration page content --> 
<div id="registrationMenu" data-position="inline"> 
    <div id="registrationInner" >  
     <div data-position="inline" data-role="header" data-add-back-btn="true" class="ui-header ui-bar-a" role="banner"> 
      <a href="#login" data-icon="delete" class="back">Back</a>       
      <h1 class="ui-title" role="heading" aria-level="1">Registration</h1>    
     </div> 
    </div> 
</div> 

jQuery代碼

$(".back").click(function(){ 
     $("#registrationMenu").css("display","none"); 
     $("#login").css("display","block");  
     });​ 

希望這會工作爲你。

Answer 3

我可以使用jQuery UI。它有一個標籤控件。演示可以在這裏找到http://jqueryui.com/demos/tabs/