重新分配新标签后如何更新导航栏？

Question

我想即时更改目标标签

$('#tab0').attr('href', '#four');
$('#tab0').text('Logout');

HTML

<div data-role="page" id="settingsPage">
    <div data-role="content">
        <div data-role="tabs" id="tabs">
            <div data-role="navbar">
                <ul>
                    <li><a id="tab0" href="#one" class="ui-btn-active">Tab One</a></li>
                    <li><a id="tab1" href="#two">Tab Two</a></li>
                    <li><a id="tab2" href="#three">Tab Three</a></li>
                </ul>
            </div>
            <div id="one" style="display: none" class="ui-body-d ui-content">aaaaaaaaaaaa</div>
            <div id="two" style="display: none" class="ui-body-d ui-content">bbbbbbbbbbbbb</div>
            <div id="three" style="display: none" class="ui-body-d ui-content">cccccccccccc</div>
            <div id="four" style="display: none" class="ui-body-d ui-content">Not supposed to show this now</div>
        </div>
    </div>
</div>

我希望第一个选项卡可以更改导航栏项目和选项卡的内容。

DEMO

如您所见，第一个导航栏项目名称确实在改变，但内容没有。如何在不重新加载整个页面的情况下刷新？

Answer 1

移动标签使用与 jQuery UI tabs 相同的 API。

可以做这样的事情：

$('#tab0').attr('href', '#four').text('Logout');

$('#tabs').tabs("refresh");
$('#one').hide();

DEMO

Answer 2

假设你想回到零标签，这里是快速而肮脏的

setTimeout(function(){

    $('#tab0').attr('href', '#four');
    $('#tab0').text('Logout');

    // some update should happen here to 
    $('#tab0').trigger("click");

}, 9000);