1

我正在运行 JQM 1.3.1 + JQ 2.0

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

填充列表视图时设置选项卡栏的活动按钮。

当我单击后退按钮时，会显示上一页，但选项卡栏中的活动按钮不再处于活动状态（没有一个按钮处于活动状态）。这让我觉得第一页上的所有元素都被刷新了。

如何防止元素被刷新并在“返回”调用时保持它们的状态？

    <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>
4

2 回答 2

2

工作示例：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);
    });       
});
于 2013-05-20T08:59:35.677 回答
1

从标签栏中删除类 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>
于 2013-05-20T05:39:08.147 回答