Question

当我在jquery中从一个页面转到另一个页面，并使用浏览器后退按钮返回上一页时，前一页面的导航栏项目的选项卡状态不会保留。请帮忙

Answer 1

jQuery Mobile及其 navbar 的问题在于更改页面流程。当您点击 navbar 项时，您将立即初始化更改页面流程，并且无法正确应用正确的样式。但即使它们被正确应用，由于更改页面处理，它们也不会传播到 DOM 。

在这种情况下，我们需要手动完成。您要执行的操作是从 #href li元素中删除 navbar 或将其值替换为＃。将click事件添加到同一li元素。

当用户点击导航栏标签时，javascript必须删除所有可用的类： ui-btn-active 和 ui-state-persist 。如果你在每个页面都有一个导航栏，那么让它们都有相同的名称，因为这个javascript需要经历所有这些。删除所有这些类后，再次添加它们，但这次只是点击/选择 navbar 项。

现在手动初始化jQuery Mobile changePage函数，让它转移到所需的页面。当changePage函数结束其转换更正时，将选择navbar元素（如果单击后退按钮，它也将在前一页上选择）。

工作示例：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);
    });       
});

Answer 2

您是否在导航栏中使用class="ui-btn-active ui-state-persist"来保留标签状态？

检查link

中给出的示例

Jquery mobile在导航期间不会保持按钮状态

2 个答案: