JQuery Mobile中的Tab活动状态

假设我们有两个使用data-role =“navbar”的标签,我们切换到第二个标签,然后转到另一个新页面.当我们从上一页返回时,为什么我们选择第二个选项卡的选项卡不是活动的选项卡.它显示第一个选项卡仅为活动状态.是 jquery移动不处理这个. 说明：

不幸的是,jQuery Mobile没有正确处理这个问题所以我们需要这样做.基本上你需要从navbar li元素中删除href.页面更改将手动处理.我们在这里做的是将click事件绑定到navbar 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);
    });       
});