jQuery Mobile 导航故障答案

【问题标题】：jQuery Mobile navigation glitchjQuery Mobile 导航故障
【发布时间】：2015-07-21 13:12:09
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery css jquery-mobile mobile

【解决方案1】：

发生这种情况是因为您的 id 重复（两个菜单都使用#bars），这会导致麻烦。

通过更改 id 来解决问题，使它们是唯一的（例如：#bars1 用于主页，#bars2 用于页面 2），以及相应的图标链接引用，然后它将正常工作（@987654321 @)

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

【讨论】：