jquery后退按钮显示div元素答案

【问题标题】：jquery back button to display div elementjquery后退按钮显示div元素
【发布时间】：2012-05-25 20:12:47
【问题描述】：

这是我的页面格式，在同一页面中

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

它不起作用，因为它会返回到上一页？请帮忙。

【问题讨论】：

标签： jquery jquery-ui html

【解决方案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
    });
});

【讨论】：

【解决方案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");    
        });

希望这对你有用。

【讨论】：

【解决方案3】：

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

【讨论】：