javascript - 根据选项卡更改页面名称

Question

我有一个使用 jquery mobile 和 nativedroid2 构建的小应用程序。

我想知道是否可以根据标签名称更改页面标题名称？

例如http://jsfiddle.net/livewirerules/2a7so7r5/1/您会看到页面标题是 Friends 而我的事件标签是 Friends 所以当我移动到下一个标签时。 工作 页面标题应相应更改

下面是我的演示JS代码

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

}

任何帮助将不胜感激

Answer 1

您想附加到每个选项卡项的点击处理程序。只需将此代码块添加到您的 $(document) 函数中即可。并为您的页面标题元素设置一个 ID。

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

这是更新后的 fiddle http://jsfiddle.net/2a7so7r5/18/