jQuery和移动面板导航

我正在构建一个HTML5移动应用程序。我以以下方式将面板用作页面：

我还有一个登录页面，如下所示：

<div class="upage panel" id="login_page" data-header="af-header-1" data-footer="none">
    <div class="upage-outer">
        <header class="container-group inner-element uib_w_5" data-uib="app_framework/header" data-ver="1" id="af-header-1">
            <h1>Login</h1>
            <div class="widget-container wrapping-col single-centered"></div>
            <div class="widget-container content-area horiz-area wrapping-col left with-back"><a class="button" id="backButton" href="#mainpage">Back</a>
            </div>
            <div class="widget-container content-area horiz-area wrapping-col right"></div>
        </header>
        <div id="login_pagesub" class="upage-content ">
            <div class="grid grid-pad urow uib_row_6 row-height-6" data-uib="layout/row" data-ver="0">
                <div class="col uib_col_8 col-0_12-12" data-uib="layout/col" data-ver="0">
                    <div class="widget-container content-area vertical-col">
                        <div class="widget uib_w_17 d-margins login_status_lbl" data-uib="media/text" data-ver="0" id="login_status_lbl">
                            <div class="widget-container left-receptacle"></div>
                            <div class="widget-container right-receptacle"></div>
                            <div>
                                <p>Please login to view your account.</p>
                            </div>
                        </div><span class="uib_shim"></span>
                    </div>
                </div>
                <span class="uib_shim"></span>
            </div>
            <div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0">
                <div class="col uib_col_9 col-0_12-12" data-uib="layout/col" data-ver="0">
                    <div class="widget-container content-area vertical-col">
                        <div class="table-thing with-label widget uib_w_13 d-margins" data-uib="app_framework/input" data-ver="1">
                            <input class="wide-control" placeholder="Username" type="text" id="l_username" name="l_username">
                        </div>
                        <div class="table-thing with-label widget uib_w_14 d-margins" data-uib="app_framework/input" data-ver="1">
                            <input class="wide-control" placeholder="Password" type="text" id="l_password" name="l_password">
                        </div><span class="uib_shim"></span>
                    </div>
                </div>
                <span class="uib_shim"></span>
            </div>
            <div class="grid grid-pad urow uib_row_8 row-height-8" data-uib="layout/row" data-ver="0">
                <div class="col uib_col_10 col-0_12-12" data-uib="layout/col" data-ver="0">
                    <div class="widget-container content-area vertical-col">
                        <a class="button widget uib_w_15 d-margins" data-uib="app_framework/button" data-ver="1" id="login_btn" onclick="verifyInfo()">Login</a><a class="button widget uib_w_16 d-margins" data-uib="app_framework/button" data-ver="1" id="proceed_btn"
                        href="#account_page" data-transition="fade">Proceed</a>
                        <span class="uib_shim"></span>
                    </div>
                </div>
                <span class="uib_shim"></span>
            </div>
        </div>
    </div>
    <!-- /upage-outer -->
</div>

基于此，我对其工作原理的假设是，单击login按钮，用户名和密码将发送到webservice，返回一个布尔值，我使用json.stringify在比较条件语句中使用它。如果验证为真，则应打开面板页面帐户页面。但是，这不会发生，而是在XDK控制台中出现以下错误： 未捕获的TypeError:对象[Object Object]没有方法“panel”

关于我可以在这里做些什么来实现期望的功能，有什么想法吗

提前感谢所有回复

编辑：添加account_页面div以提高可见性

代替.panel，尝试使用$.ui.loadContentaccount\u页面，false，false，slide

---

此外，您不应使用“localhost”作为请求URL，请使用您的本地IP地址。

您是否尝试过window.location=$“account\u page”.attr'href'？然而，我确实在使用这种方法时做了一些小工作；使用您在此处给出的确切行可以得到404:Intel XDK找不到您的应用程序。上面的标记中的帐户页面面板在哪里？我只能看到登录页面。要更改页面还是打开面板？您的问题不清楚。帐户页面已添加。我想打开一个面板。请张贴相关标记，您当前的代码不清楚。我不知道上面的标记是一个页面还是一个面板。面板应具有data role=panel和pages data role=page。当前，此答案被列为低质量，看起来像是一条注释。如果你对此有把握，试着解释一下。这里有什么要解释的？OP可能使用了错误的方法，所以我建议使用其他可能是答案的方法…至少现在看起来更好了。谢谢你提供更多的信息。我今天试了一下，看看它是否有效。我会继续玩它。最初的尝试产生了以下错误。未捕获类型错误：无法调用未定义索引的方法'loadContent'。html:137匿名函数index.html:137 x.event.dispatch jquery.min.js:5 v.handle jquery.min.js:5 x.event.trigger jquery.min.js:5 k jquery.min.js:6 r jquery.min.js:6

function verifyInfo(){
    var uName=document.getElementById("l_username").value;
    var pWord=document.getElementById("l_password").value;
    $.ajax(  
    {  
        type: 'POST',
        url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
        data: "{ \"username\":\""+uName+"\",\"password\":\""+pWord+"\"}",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        //dataFilter: function(data){alert(data);},
        success: function(data) {
            var response = JSON.stringify(data.d);
            if(response == "true"){
                alert("true");
                $("#account_page").panel("open");

            }
            else{
                document.getElementById('output_u').innerHTML="The Username or Password is incorrect, please try again.";
            }
        },
        error: function(data){alert('Failed on '+data.d);}
    });
}

<div class="upage panel" id="account_page" data-header="af-header-4" data-footer="none">
        <div class="upage-outer">
            <header class="container-group inner-element uib_w_8" data-uib="app_framework/header" data-ver="1" id="af-header-4">
                <h1>Account</h1>
                <div class="widget-container wrapping-col single-cente  red"></div>
                <div class="widget-container content-area horiz-area wrapping-col left with-back"><a class="button" id="backButton" href="#mainpage">Back</a>
                </div>
                <div class="widget-container content-area horiz-area wrapping-col right"></div>
            </header>
            <div id="account_pagesub" class="upage-content ">

                <div class="grid grid-pad urow uib_row_9 row-height-9" data-uib="layout/row" data-ver="0">
                    <div class="col uib_col_11 col-0_6-12" data-uib="layout/col" data-ver="0">
                        <div class="widget-container content-area vertical-col">

                            <div class="widget uib_w_18 d-margins currbalance_label" data-uib="media/text" data-ver="0" id="currbalance_label">
                                <div class="widget-container left-receptacle"></div>
                                <div class="widget-container right-receptacle"></div>
                                <div>
                                    <p>Current Balance:</p>
                                </div>
                            </div><span class="uib_shim"></span>
                        </div>
                    </div>
                    <div class="col uib_col_12 col-0_6-12" data-uib="layout/col" data-ver="0">
                        <div class="widget-container content-area vertical-col">

                            <div class="widget uib_w_19 d-margins currbalance_datapoint" data-uib="media/text" data-ver="0" id="currbalance_datapoint">
                                <div class="widget-container left-receptacle"></div>
                                <div class="widget-container right-receptacle"></div>
                                <div>
                                    <p>$38.99</p>
                                </div>
                            </div><span class="uib_shim"></span>
                        </div>
                    </div>
                <span class="uib_shim"></span>
            </div>
        </div>
    </div>
</div>