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/

找到演示

jquery后退按钮显示div元素

3 个答案: