Javascript 如何打开另一个<；部门>；单击列表中的项目时？

我正在创建一个SPA应用程序。我必须为pageView和pageDetail设置不同的div。我将从SQlite数据库中检索数据，并显示在pageView下的listview中。如果单击列表中的某个项目，则它应该加载pageDetail并在那里执行一些功能。目前，我可以从SQlite检索数据并在listview中显示。我还可以单击该项目，我使用alert进行了测试。我尝试使用pagecontainer load，但它不起作用。单击项目时如何加载pageDetail，加载pageDetail时如何运行函数

HTML div-#页面视图和#页面详细信息

   <div data-role="page" id="pageView">
    <div data-role="header">

        <h2>View</h2>
        <button type="button" id="buttonView">View</button>
    </div>
    <!-- main -->
    <div data-role="main" class="ui-content">

        <ul id="listData" data-role="listview">
        </ul>

    </div>
    <!-- footer -->
    <div data-role="footer">
        <h2>myproject</h2>
    </div>
</div>

<div data-role="page" id="pageDetail">
    <div data-role="header">
        <a href="#pageView" class="ui-btn ui-icon-back">Back</a>
        <h2>Details</h2>

    </div>
    <!-- main -->
    <div data-role="main" class="ui-content">


    </div>
    <!-- footer -->
    <div data-role="footer">
        <h2>myproject</h2>
    </div>
</div>

---

如果你只是需要重定向

window.location.href = "http://YourSite.com/#PageDetail"; 

否则，您可以尝试在使用display:none加载时不显示页面详细信息，并执行display:block onClick

如果您希望在单击项目后加载pageDetail，我建议您对其进行ajax调用，返回请求的html，然后将其输出到容器中

---

我还不确定你想做什么，所以这只是一只雁。

我的页面视图和页面详细信息在同一个html文件中。如果单击了列表中的项目，我只需要打开另一个div。如果有jquery，则使用pageDetails的id to.show（）或.hide（）。否则，您需要访问请求的divs css以切换显示选项。当使用.show（）和.hide（）时，该选项有效。但是我把我的UI搞乱了。它只是在普通的html视图中显示。我的jquery按钮都不工作。

window.location.href = "http://YourSite.com/#PageDetail";