jquery Mobile UI-BTN-Active 不起作用

Question

在jQuery移动版中，我有三个值的选项卡栏，当我在类别之间切换时，它只会亮一秒钟

我希望当我单击任何选项卡时，该选项卡将以不同的颜色设置为活动状态

我使用这个jQuery代码：

$(document).delegate('.ui-navbar ul li > a', 'click', function () {
    $(this).closest('.ui-navbar').find('a').removeClass('ui-navbar-btn-active');
    //$('.ui-navbar ul li > a').removeClass('ui-navbar-btn-active');
    $(this).addClass('ui-navbar-btn-active');
    //$('.content_div').hide();
    $('#' + $(this).attr('data-href')).show().siblings('.content_div').hide();
});

目录 ：

 <div class="boxshadow" >
        <div data-role="navbar">
            <ul>
                <li ><a href="javascript:;" data-href="a" data-theme="a"  class="ui-btn-active ui-state-persist" class="ui-navbar-btn-active">Shopping</a></li>
                <li><a href="javascript:;" data-href="b" data-theme="a">
                Entertainment</a></li>
                <li><a href="javascript:;" data-href="c" data-theme="a">Restaurants</a></li>
            </ul>
        </div><!-- /navbar -->

Answer 1

当你使用 .ui-state-persist 类时，你是在告诉 jQuery Mobile 无论你导航到哪个页面，都要激活 li 标签。所以你的jQuery脚本违背了目的

取消jquery脚本和.ui-state-persist类，并为.ui-btn-active类分配背景色，如下所示

[data-theme="b"].ui-btn-active { background: none 0 0 no-repet #whatever-color; }

如果您有多个页面结构 （http://view.jquerymobile.com/1.3.1/dist/demos/widgets/pages/#Multi-pagetemplatestructure），导航栏应自动处理活动状态。