Jquery mobile jquery移动导航栏的问题

我有一个带有两个项目的导航栏，当我第一次加载它时，它工作正常。但是，当我回去再回来的时候，我面临着一些问题。即使显示的内容是第二项内容，第一个导航栏也会高亮显示。下面是我的代码

<div data-role="main" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a href="#fragment-1" class="ui-btn-active ui-state-persist">one</a></li>
<li><a href="#fragment-2">Two</a></li>
</ul>
</div>
<div id="fragment-1" style="color:white" >
<ul id="fragment-1ul">
<li>test3<li>
<li>test4<li>
</ul>
</div>
<div id="fragment-2" style="color:white" >
<ul id="fragment-2ul">
<li>test1<li>
<li>test2<li>
</ul>
</div>
</div>
</div>
</div>

测试3

测试4



测试1

测试2

单击链接时，必须手动添加/删除ui状态持久化类：

<div data-role="main" class="ui-content">
<div data-role="tabs">
<div data-role="navbar">
<ul>
<li><a onclick="navItemClick(this);" href="#fragment-1" class="ui-btn-active ui-state-persist">one</a></li>
<li><a onclick="navItemClick(this);" href="#fragment-2">Two</a></li>
</ul>
</div>
<div id="fragment-1" style="color:white" >
<ul id="fragment-1ul">
<li>test3<li>
<li>test4<li>
</ul>
</div>
<div id="fragment-2" style="color:white" >
<ul id="fragment-2ul">
<li>test1<li>
<li>test2<li>
</ul>
</div>
</div>
</div>
</div>


<script type="text/javascript">
        function navItemClick(obj){

                $("ul a").removeClass("ui-state-persist");
                $(obj).addClass("ui-state-persist");

    }
     </script>

测试3

测试4



测试1

测试2


函数navItemClick（obj）{
$（“ul a”）.removeClass（“ui状态持久化”）；
$（obj）.addClass（“ui状态持久化”）；
}

问题是，当我返回屏幕时，我遇到了这个问题。但这是第一次它工作正常。举例来说，如果我在第一个标签，然后我回去，回到这个页面突出显示的一个和内容将是相同的。现在我按第二个标签，然后按后退按钮。现在如果我回到同一页，突出显示的内容将是第一个，显示的内容将是第二个