Question

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

Answer 1

描述：

不幸的是， jQuery Mobile 无法正确处理此问题，因此我们需要这样做。基本上，您需要从导航栏 href 元素中删除 li 。页面更改将手动处理。我们在这里做的是将点击事件绑定到导航栏 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);
    });       
});

Answer 2

这是我的简短解决方案。它对我来说很完美

示例HTML结构

<div id="profile-screen" data-role="page" class="page">
    <div data-role="content" class="content inner-page group">
        <div data-role="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a href="#tab-profile" class="ui-btn-active">Profile</a></li>
                    <li><a href="#tab-addresses">Addresses</a></li>
                </ul>
            </div>

            <!-- Profile tab -->
            <div id="tab-profile" class="main-content"> Sample Content for the first tab</div>

            <!-- Addresses tab -->
            <div id="tab-addresses" class="main-content"> Sample Content for the second tab</div>
        </div>
    </div>
</div>

这是解决方案

$( "#profile-screen" ).on( "pagebeforeshow", function() {
    var active_content = $('#profile-screen .ui-tabs-panel[style*="block"]').attr('id');
    $('#profile-screen a[href^="#'+ active_content +'"]').addClass('ui-btn-active');
});

首先，您必须找到活动内容。活动内容的典型特征是它具有style="display:block"。当你找到它时，你必须得到id（我的代码中是var active_content）。当您知道哪些内容处于活动状态时，您所要做的就是找到正确的锚标记并设置类ui-btn-active。所有这些事情你必须在pagebeforeshow事件中输入。

Answer 3

我知道这已经过时了但不需要这一切。

我也遇到了这个问题，你只需要很少的线来修复它。就我而言，它位于标签中，因此无需更改页面。

$(document).on( "pageinit", "#yourpageID", function() {
    $('div[data-role="tabs"] [data-role="navbar"] a').click( function(e) {
        e.preventDefault();
        $('div[data-role="tabs"] [data-role="navbar"] .ui-btn-active').removeClass('ui-btn-active ui-state-persist');
        $(this).addClass('ui-btn-active ui-state-persist');
    });
});

另外要小心使用pagebeforeshow等页面事件来绑定JQM中的事件，前一个（或多个）页面可能位于缓存中，如果你来回移动，则click事件将被绑定多次。而是使用pageinit或.one绑定事件

JQuery Mobile中的Tab活动状态

3 个答案:

描述：

解决方案：

代码：

编辑：