1

jQueryモバイルには、3つの値を持つタブバーがあり、カテゴリを切り替えると、1秒だけ点灯します

任意のタブをクリックすると、タブが別の色でアクティブに設定されます

私はこの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();
});

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 クラスを使用すると、どのページに移動しても li タグをアクティブにするよう jQuery Mobile に指示することになります。だからあなたの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 ) がある場合、ナビゲーション バーはアクティブな状態を自動的に処理する必要があります。

于 2013-07-09T18:50:49.210 に答える