3

假设我们有 2 个使用 的选项卡data-role="navbar"，我们切换到第二个选项卡，然后转到另一个新页面。当我们从上一页返回时，为什么我们选择的第二个选项卡不是处于活动状态的选项卡。它显示第一个选项卡仅处于活动状态。jquery mobile 不处理这个。

4

3 回答 3

3

描述 ：

不幸的是jQuery Mobile，没有正确处理这个问题，所以我们需要这样做。基本上你需要href从导航栏li元素中删除。页面更改将手动处理。我们在这里所做的是将点击事件绑定到导航栏li元素。当用户单击导航栏时，它将从当前选定的元素中删除ui-btn-activ和ui-state-persist类。它将把它添加到当前选定的元素中，并pageChange在一个小的超时后初始化一个。需要超时，因为我们需要确保在页面更改发生之前添加类。

解决方案 ：

这是我前段时间做的一个工作示例：http: //jsfiddle.net/Gajotres/6h7gn/

代码：

此代码是为我当前的示例及其导航栏制作的，因此请稍作更改以与您的导航栏一起使用。

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#kml li', function(){ 
        var selectedLi = $(this);
        $('#kml li').each(function( index ) {   
            var loopLi = $(this);
            if(loopLi.find('a').hasClass('ui-btn-active')) {  
                $(this).find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
            }
        });         
       selectedLi.find('a').addClass('ui-state-persist');        
       setTimeout(function(){
            $.mobile.changePage( "#second", { transition: "slide"});
        },100);
    });       
});

编辑 ：

下一个版本示例：http: //jsfiddle.net/Gajotres/6h7gn/

这个适用于每一页。

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).off('click', '#custom-navbar li').on('click', '#custom-navbar li', function(e){ 
        var selectedLi = $(this);
        $('#custom-navbar li').each(function( index ) {   
            var loopLi = $(this);
            if(loopLi.find('a').hasClass('ui-btn-active') || loopLi.find('a').hasClass('ui-state-persist')) { 
                loopLi.find('a').removeClass('ui-btn-activ').removeClass('ui-state-persist');
            }
            if(loopLi.attr('id') == selectedLi.attr('id')) {
                loopLi.find('a').addClass('ui-state-persist');   
            }
        });              
       setTimeout(function(){
            $.mobile.changePage( selectedLi.find('a').attr('data-href'), { transition: "slide"});
        },100);
    });       
});
于 2013-05-25T20:05:32.247 回答
3

这是我的简短解决方案。它非常适合我

示例 HTML 结构

<div id="profile-screen" data-role="page" class="page">
    <div data-role="content" class="content inner-page group">
        <div data-role="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#tab-profile" class="ui-btn-active">Profile</a></li>
                    <li><a href="#tab-addresses">Addresses</a></li>
                </ul>
            </div>

            <!-- Profile tab -->
            <div id="tab-profile" class="main-content"> Sample Content for the first tab</div>

            <!-- Addresses tab -->
            <div id="tab-addresses" class="main-content"> Sample Content for the second tab</div>
        </div>
    </div>
</div>

这就是解决方案

$( "#profile-screen" ).on( "pagebeforeshow", function() {
    var active_content = $('#profile-screen .ui-tabs-panel[style*="block"]').attr('id');
    $('#profile-screen a[href^="#'+ active_content +'"]').addClass('ui-btn-active');
});

首先，您必须找到活动内容。活动内容的典型特征是它具有style="display:block". 当您找到它时，您必须获取 id（它var active_content在我的代码中）。当您知道哪些内容处于活动状态时，您所要做的就是找到正确的锚标记并设置 class ui-btn-active。所有这些你都必须在pagebeforeshow事件中输入。

于 2015-11-24T14:24:02.040 回答
2

我知道这是旧的，但不需要这一切。

我也有这个问题，你只需要几行来解决它。就我而言，它位于标签中，因此不需要更改页面。

$(document).on( "pageinit", "#yourpageID", function() {
    $('div[data-role="tabs"] [data-role="navbar"] a').click( function(e) {
        e.preventDefault();
        $('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
        $(this).addClass('ui-btn-active ui-state-persist');
    });
});

还要小心使用 pagebeforeshow 之类的页面事件来绑定 JQM 中的事件，上一个（或更多）页面可能在缓存中，如果你来回移动，点击事件将被绑定多次。而是使用 pageinit 或 .one 来绑定事件

于 2014-05-18T18:47:47.677 回答