2

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

4

2 回答 2

1

jQuery Mobile 的问题及其navbar正在更改页面过程。当您单击某个navbar项目时，您将立即初始化更改页面过程，并且不会正确应用正确的样式。但是即使它们被正确应用，由于更改页面过程，它们也不会传播到DOM.

在这种情况下，我们需要手动完成。你想要做的是#href从你的navbarli 元素中删除或用 # 替换它的值。向同一个 li 元素添加一个点击事件。

当用户单击导航栏选项卡时，javascript 必须删除所有可用的类，称为:ui-btn-active和ui-state-persist. 如果您在每个页面中都有一个导航栏，那么让它们都具有相同的名称，因为这个 javascript 将需要遍历所有这些。当所有这些类都被删除时，然后再次添加它们，但这次只添加到单击/选定的navbar项目。

现在手动初始化 jQuery Mobile 的 changePage 函数并让它转换到需要的页面。当 changePage 函数结束时，它的转换正确导航栏元素将被选中（如果单击后退按钮，它也会在前一页上被选中）。

工作示例：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-28T13:21:21.920 回答
0

您是否class="ui-btn-active ui-state-persist"在导航栏中使用来保持选项卡状态？

检查链接中给出的示例

于 2013-05-14T06:36:37.193 回答