Ändern Sie den Seitennamen anhand der Registerkarte

Question

Ich habe eine kleine App mit jquery mobile und nativedroid2 erstellt.

Ich möchte wissen, ob es möglich ist, den Namen der Seitenüberschrift basierend auf dem Namen der Registerkarte zu ändern?

Für ein Beispiel http://jsfiddle.net/livewirerules/2a7so7r5/1/ Sie sehen die Seitenüberschrift ist Friends und meine aktive Registerkarte ist Friends, also wenn ich zum nächsten Tab gehe. Work der Seitentitel sollte entsprechend ändern

Im Folgenden meine Demo-JS-Code ist

$(document).on("pagecreate", "#page1", function() { 
    $("div[role=main]").on("swipeleft", function (event) { 
     changeNavTab(true); 
    }); 

    $("div[role=main]").on("swiperight", function (event) { 
     changeNavTab(false); 
    }); 
}); 

function changeNavTab(left) { 
    var $tabs = $('ul[data-role="nd2tabs"] li'); 
    console.log($tabs); 
    var len = $tabs.length; 
    var curidx = 0; 
    $tabs.each(function(idx){ 
     if ($(this).hasClass("nd2Tabs-active")){ 
      curidx = idx; 
     } 
    }); 

    var nextidx = 0; 
    if (left) { 
     nextidx = (curidx >= len - 1) ? 0 : curidx + 1; 
    } else { 
     nextidx = (curidx <= 0) ? len - 1 : curidx - 1; 
    } 
    $tabs.eq(nextidx).click(); 

} 

jede Hilfe wird

Answer 1

Sie möchten die Click-Handler jeder Lasche Artikel befestigen geschätzt. Fügen Sie diesen Codeblock einfach zu Ihrer $(document) Funktion hinzu. Und legen Sie eine ID für Ihr Seitenüberschriftelement fest.

<h1 id="heading" class="wow fadeIn" data-wow-delay='0.4s'>Friends</h1> 

$('ul[data-role="nd2tabs"] li').on('click',function(){ 
    $("#heading").html($(this).html()); 
}); 

Hier ist die aktualisierte Geige http://jsfiddle.net/2a7so7r5/18/

Answer 2

Ich weiß nicht, was zu erwarten, aber das ist mein aproach Modified example

function changeNavTab(left) { 
    var $active = $('ul[data-role="nd2tabs"] li.nd2Tabs-active'); 
    if(left){ 
     var $moveto = $active.next().length ? $active.next() : $('ul[data-role="nd2tabs"] li:first'); 
    }else{ 
     var $moveto = $active.prev().length ? $active.prev() : $('ul[data-role="nd2tabs"] li:last'); 
    } 
    var title = $moveto.text(); 
    $("h1.ui-title").text(title); 
}