1

In jQuery mobile I have tabs bar with three values, when i switch between the categories it just light a second

i want when i click on any tab, the tab will be set active with different color

i use this jQuery code :

$(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();
});

Html :

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

1 回答 1

0

当您使用 .ui-state-persist 类时，您是在告诉 jQuery Mobile 让 li 标记处于活动状态，无论您导航到哪个页面。所以你的 jQuery 脚本没有达到目的

Nix 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），导航栏应该自动处理活动状态。

于 2013-07-09T18:50:49.210 回答