Question

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

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

Answer 1

单击链接时，您必须手动添加/删除ui-state-persist类：

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

jquery移动导航栏的问题

1 个答案: