Question

我正在运行JQM 1.3.1 + JQ 2.0

我有一个大约60个元素+固定页脚（tabbar）的列表视图（无滚动）。如果我点击listview的一个元素，它会在新的哈希页面中显示一些内容，其中我添加了一个“后退”按钮。

在填充列表视图时设置标签栏的活动按钮。

当我单击后退按钮时，显示上一页，但标签栏中的活动按钮不再处于活动状态（没有任何按钮处于活动状态）。这让我觉得第一页上的所有元素都已刷新。

如何防止元素刷新并使其状态保持“后退”状态？

    <div data-role='navbar' id='kms'>
      <ul id='kml'>
        <li id='l5'><a href='#' id='d5' class='ui-btn-active'>Ici</a></li>
        <li id='l20'><a href='#' id='d20'>5 km</a></li>
        <li id='l50'><a href='#' id='d50'>20 km</a></li>
        <li id='l100'><a href='#' id='d100'>50 km</a></li>
      </ul>
    </div>

Answer 1

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

Answer 2

从标签栏中删除类ui-btn-active。并为主动和被动选项卡编写自己的自定义css类。它对我有用。这可能有所帮助。

.footer-passive a
{
background: #99ce3e ; /*light green*/
}

表示活动按钮

 .footer-active a
{
 background: #709630;/*dark green*/
}

然后尝试使用下面的代码段。

<div data-role="footer"  data-theme="b" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li class="footer-color-active"><a href="sample1.html"  class="ui-btn-active"><img src="your_file/path1" /></a></li>
            <li class="footer-color"><a href="sample2.html" ><img src="your_file/path2"  /></a></li>
            <li class="footer-color"><a href="sample3.html" ><img src="youtr_file/path3" /></a></li>
        </ul>
    </div>
</div>

在jquery mobile 1.3.1中的后退按钮上停止标签栏刷新

2 个答案: