javascript - jQuery Mobile 导航故障

Question

当我在主页并使用顶部的导航栏转到第 2 页，然后返回主页时。导航栏出现故障，我不知道为什么。我该如何解决这个问题？

fiddle :https://jsfiddle.net/3d1oyx2v/15/

HTML:

<div data-role="page" id="Home">
    <div data-role="header" data-position="fixed">
         <h1 style="text-align:left; margin-left:40px;">Home</h1>
 <a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>

    </div>
    <!-- /header -->
    <div data-role="content" id="homeContent">
        <p>Home.</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed">
         <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
    <div data-role="panel" id="bars" data-theme="a">
        <!-- panel content goes here -->
        <ul data-role="listview" class="ui-listview-outer">
            <li><a href="#Home">Home</a>

            </li>
            <li><a href="#page2">Page 2</a>

            </li>
    </div>
    <!-- /panel -->
</div>
<!-- /page -->
<div data-role="page" id="page2">
    <div data-role="header" data-position="fixed">
         <h1 style="text-align:left; margin-left:40px;">Page 2</h1>
 <a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>

    </div>
    <!-- /header -->
    <div data-role="content">
        <p>Page 2.</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed">
         <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
    <div data-role="panel" id="bars" data-theme="b">
        <!-- panel content goes here -->
        <ul data-role="listview" class="ui-listview-outer">
            <li><a href="#Home">Home</a>

            </li>
            <li><a href="#page2">Tee Times</a>

            </li>
        </ul>
    </div>
    <!-- /panel -->
</div>
<!-- /page -->

Answer 1

发生这种情况是因为您有一个重复的 ID(两个菜单的 #bars)，这会导致麻烦。

通过更改 ID 使其具有唯一性(例如:#bars1 表示主页，#bars2 表示第 2 页)以及图标来解决此问题相应的链接引用，然后它就可以正常工作( see it on this JSFiddle )

<div data-role="page" id="Home">
    <div data-role="header" data-position="fixed">
        <h1 style="text-align:left; margin-left:40px;">Home</h1>
        <a href="#bars1" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>

    </div>
    <!-- /header -->
    <div data-role="content" id="homeContent">
        <p>Home.</p>
    </div>
    <!-- /content -->
    <div data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>

    </div>
    <!-- /footer -->
    <div data-role="panel" id="bars1" data-theme="a">
        <!-- panel content goes here -->
        <ul data-role="listview" class="ui-listview-outer">
            <li><a href="#Home">Home</a>

            </li>
            <li><a href="#page2">Page 2</a>

            </li>
        </div>
        <!-- /panel -->
    </div>
    <!-- /page -->
    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed">
            <h1 style="text-align:left; margin-left:40px;">Page 2</h1>
            <a href="#bars2" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a>

        </div>
        <!-- /header -->
        <div data-role="content">
            <p>Page 2.</p>
        </div>
        <!-- /content -->
        <div data-role="footer" data-position="fixed">
            <h4>Page Footer</h4>

        </div>
        <!-- /footer -->
        <div data-role="panel" id="bars2" data-theme="b">
            <!-- panel content goes here -->
            <ul data-role="listview" class="ui-listview-outer">
                <li><a href="#Home">Home</a>

                </li>
                <li><a href="#page2">Tee Times</a>

                </li>
            </ul>
        </div>
        <!-- /panel -->
    </div>
    <!-- /page -->