Question

我正在创建我的第一个JQuery Mobile应用程序。我有以下html：

<head>
    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
    <script src="js/jquery-2.2.0.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
        //  $.mobile.changePage.defaults.changeHash = false;
        //  $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<!-- INDEX - TOP -->
<div data-role="page" id="pg-index">

    <div data-role="header">
        <h1>APP</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <h3 id="db-title">Add Client</h3>
    </div><!-- /content -->

   <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-icon="grid" class="ui-btn-active">Summary</a></li>
                <li><a href="#pg-settings" data-ajax="false" data-icon="gear">Settings</a></li>
                <li><a href="#pg-about" data-ajax="false" data-icon="info">About</a></li>
            </ul>
        </div>
    </div><!-- /footer -->

</div><!-- /page -->
<!-- INDEX - BOTTOM -->

<!-- SETTINGS - TOP -->
<div data-role="page" id="pg-settings">

    <div data-role="header">
        <h1>APP</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">
        <h3 class="ui-bar ui-bar-a">Settings</h3>
        <form>
                <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true" id="ss-ctrl-units">
                    <legend>
                        Units of Measurement:
                    </legend>
                    <input name="ctrl-units-1" id="ctrl-units-1" value="metric" checked="checked" type="radio">
                    <label for="ctrl-units-1">Metric</label>
                    <input name="ctrl-units-1" id="ctrl-units-2" value="imperial" type="radio">
                    <label for="ctrl-units-2">Imperial</label>
                </fieldset>
            </form>
            <div id="sg-Metric" class="hide-object-none">
                <p>Data will be displayed and recorded in metric units.</p>
                <p>Examples:</p>
                <ul>
                    <li>Height: 182 cm (one-hundred and eighty-two centimeters)</li>
                    <li>Weight: 85.22 kg (eighty-five kilograms)</li>
                </ul>

            </div>
            <div id="sg-Imperial" class="hide-object-none">
                <p>Data will be displayed and recorded in imperial units.</p>
                <p>Examples:</p>
                <ul>
                    <li>Height: 5'4" (five feet, four inches)</li>
                    <li>Weight: 154 lb (one-hundred and fifty-found pounds)</li>
                </ul>
            </div>
    </div><!-- /content -->

    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-ajax="false" data-icon="grid">Summary</a></li>
                <li><a href="#" data-icon="gear" class="ui-btn-active">Settings</a></li>
                <li><a href="#pg-about" data-ajax="false" data-icon="info">About</a></li>
            </ul>
        </div>
    </div><!-- /footer -->

</div><!-- /page -->
<!-- SETTINGS - BOTTOM -->

<!-- ABOUT - TOP -->
<div data-role="page" id="pg-about">

    <div data-role="header">
        <h1>APP</h1>
    </div><!-- /header -->

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

    <div data-role="footer">
        <div data-role="navbar">
            <ul>
                <li><a href="index.html" data-ajax="false" data-icon="grid">Summary</a></li>
                <li><a href="#pg-settings" data-ajax="false" data-icon="gear">Settings</a></li>
                <li><a href="#" data-icon="info" class="ui-btn-active">About</a></li>
            </ul>
        </div>
    </div><!-- /footer -->

</div><!-- /page -->
<!-- ABOUT - BOTTOM -->
</body>

我已经检查过StackOverflow。我能找到的最接近我的问题是Jquery Mobile Button is not working at Second Click。我在页面中找不到任何重复的ID。除非我没有仔细看待......

有效的按钮方案：设置/设置摘要摘要。突出显示作品 - 突出显示设置。设置摘要。然后单击“设置”（再次）。突出显示作品 - 突出显示设置。关于/即将摘要的摘要。突出显示作品 - 摘要已突出显示。关于。的摘要。然后单击关于（再次）。突出显示作品 - 关于突出显示。

不起作用的活动按钮方案：设置摘要到设置。应突出显示“设置”按钮。它不是。关于设置的概要。应突出显示“关于”按钮。事实并非如此。

问题：如何修复无效的方案？

Answer 1

我刚刚发现了这一点：将“ui-state-persist”类添加到活动按钮。这将确保活动设置保持活动状态。隐藏在http://demos.jquerymobile.com/1.4.5/navbar/的普通网站上。

Jquery Mobile - 第二次点击有时不会突出显示导航按钮

1 个答案: