html - Jquery Mobile 仅加载 DOM 中的第一页，而不加载其他页面的 css 页面 hide() show()

Question

Jquery mobile 仅加载 DOM 中的第一页 我通过 hide() 和 show() 实现页面导航，但现在我使用 jquery 对象，如 google map 和 navbar 现在它停止工作并且不在我的代码中显示第 3 页直到我将第 3 页放在页面顶部但比第 1 页停止显示具有适当的 jquery css 的 jquery 导航栏。目前我正在开发 html5、jquery mobile、phonegap、android 模拟器。HTML代码

<div data-role="page" id="page1">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>
        <div data-role="fieldcontain" style="width:100%;float:left;"><input type="search" name="password" id="search" value="" data-theme="c" /></div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="list-tab" class="content_div listing" >
        <ul id="tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>
        <div id="map-tab" class="content_div"><div id="map-container"><div id="map_canvas" ></div></div></div>
        </div>
        </div>


        <div id="page2" data-role="page">
        <div data-role="header" class="pageheader" >
        <div class="logo"><a href="#" ><img src="images/logo.png" alt="logo" /></a></div>
        </div>  

        <div class="main">
        <fieldset>

        <ul>
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>
        </fieldset>
        </div><!-- main -->
        </section><!-- wrapper -->
        </div>

        <div data-role="page" id="page3">
        <div data-role="header"  class="pageheader" style="float:left;">
        <div class="back"><a href="#" class="backhomelink">Back</a></div>
        </div>

        <div data-role="fieldcontain" style="width:100%;float:left;">
        <input type="search" id="newsearch" value="" data-theme="c" />
        </div>

        <div data-role="content" style="width:100%; float:left; padding:0;">
        <div data-role="navbar" style="width:100%; float:left;">
        <ul >
        <li><a href="#" data-href="list-tab"class="ui-btn-active" >Main</a></li>
        <li><a href="#" data-href="map-tab" >Map</a></li>
        </ul>
        </div><!-- /navbar -->
        <div id="new-list-tab" class="content_div listing" >
        <ul id="new-tab-List" >
        <li class="lilogin first" > LINK 1  </li>
        <li class="lilogin second" > LINK 2  </li>
        <li class="lilogin third" > LINK 3  </li>
        </ul>

        </ul>
        </div>

        <div id="new-map-tab" class="content_div"><div id="map-container"><div id="new-map_canvas" ></div></div></div>
        </div>
        </div>

Javascript Code

        $(document).ready(function() {
        var map;
        hide();
        $('#page1').show();
        $('.ui-loader').hide();

        function hide(){
        $('#page1').hide(); 
        $('#page2').hide();
        $('#page3').hide();
        }

        $(document).delegate('[data-role="navbar"] a', 'click', function () {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
        google.maps.event.trigger(map, 'resize');
        });

        $('#first').click(function() {
        hide();
        $('#page1').show();
        LoadMap("map_canvas");
        return false;
        });

        $('#second').click(function() {
        hide();
        $('#page2').show();
        return false;
        });

        $('#third').click(function() {
        hide();
        $('#page3').show();
        LoadMap("new-map_canvas");
        return false;
        });

        function LoadMap(divcanvas) {

        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var myOptions = {
        center: myLatlng,
        zoom:10,
        mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById(divcanvas),
        myOptions);

        }

        });

我什至尝试使用触发器，但我想我不知道在这种情况下它们将如何实现。

Answer 1

首先，您的 HTML 结构无效，需要修复。引用this page了解如何定义多个 JQM page s 在单个 HTML 文档中。

使用 JQM，您无需显式显示/隐藏页面。 JQM 会为您处理。您可以链接到您的 page使用<a> this page 中描述的链接.

最后，为了学习如何将 JQM 与您的自定义 JS 一起提供；阅读 this help page .