JQuery Mobile中的选项卡活动状态

假设我们有两个使用

data role=“navbar”

的选项卡，我们切换到第二个选项卡，然后转到另一个新页面。当我们从上一页返回时，为什么我们选择的选项卡第二个选项卡不是活动的选项卡。它将第一个选项卡显示为仅处于活动状态。jquery mobile没有处理此问题。

说明： 不幸的是，jQuery Mobile不能正确处理这个问题，所以我们需要这样做。基本上，您需要从导航栏

元素中删除

href

。页面更改将手动处理。我们在这里所做的是将单击事件绑定到navbar

li

元素。当用户单击导航栏时，它将从当前选定的元素中删除ui btn activ和ui状态持久化类。它将把它添加到当前选择的元素中，并在一个小的超时后初始化页面更改。需要超时，因为我们需要确保在页面更改发生之前添加了类

解决方案： 下面是我不久前做的一个工作示例：

代码： 这段代码是为我当前的示例及其导航栏而编写的，所以请稍微修改它以使用您的导航栏

$(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);
    });       
});

编辑： 下一版本示例：

这本书每一页都有用

$(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);
    });       
});

---

我知道这是旧的，但不需要所有这些

我也有这个问题，你只需要几行就可以解决。在我的情况下，它是在一个标签，所以不需要改变页面

$(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中的事件，前一个（或多个）页面可能在缓存中，如果来回移动，单击事件将被绑定多次。使用pageinit或.one绑定事件

以下是我的简短解决方案。它非常适合我

示例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>

---

首先，您必须找到活动内容。活动内容的典型特征是具有

style=“display:block”

。当您找到它时，您必须获得id（它是我的代码中的

var active\u content

）。当您知道哪些内容处于活动状态时，您所要做的就是找到正确的锚定标记并将class

ui btn设置为活动状态。所有这些内容都必须在展会前输入
页面。
谢谢。完美答案。但是，我有一点怀疑。为什么我们要对document对象：$（document）.on（'click'，'kml li'，function（）{}）执行此操作。我也使用相同的语法。想知道在文档对象上绑定是否有任何特定的原因。或者，它只是一个将其绑定到文档级别的syntaxiam，因为通常我们需要在多个页面上使用navbar，所以这种委托绑定将阻止我们对每个页面执行此过程。所以我们只会对第一个导航栏进行绑定，它会在以后加载的每个导航栏上工作。所以，你的意思是说我们不必再绑定导航栏了。但是，我们使用的是“#kml li”id，它不能在下一页的任何地方使用，因为id需要是唯一的。我们不应该再绑一次吗。我的理解正确吗？看看我的新内容，如果你有几个相同的导航栏，这一个将在每个可用的页面上工作。我在pageinit中选择选项卡时这样做。它在桌面浏览器上工作正常，但在设备上不工作。当我们从一个页面返回时，在我进入该页面之前单击的任何选项卡上，所有选项卡都显示为选中$每个（函数（索引）{var loopItem=$（this）；if（loopItem.find（'a'）.hasClass（'ui-btn-active'））{$（this.find（'a'）.removeClass（'ui-btn-active'）。removeClass（'ui-state-persist'）；}）；选择editem.find（'a'）.addClass（'ui-btn-active'）.addClass（'ui-state-persist'）；明亮的我还遇到在页面生成时无法选择选项卡的问题，因此在此解决方案中添加了更多内容：
$( "#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');
});