1

Here is my page format, it is in same page

<!-- 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>

How to show login page content when click on back button of registration and hide the registration page content, the above code does not work and

data-rel="back"

It's not working because it will take back to previous page? Please help.

4

3 回答 3

4 
$('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
    });
});
于 2012-05-25T11:58:07.970 回答
0

我会使用 JQuery UI。它有一个标签小部件。可以在这里找到演示http://jqueryui.com/demos/tabs/

于 2012-05-25T12:12:47.667 回答
0

在 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");    
        });​

希望这对你有用。

于 2012-05-25T12:07:47.653 回答