jquery mobile强制导航栏按钮上的ui-btn-active
我在使用 jQuery 移动导航（导航栏）时遇到问题。
我有 4 个页面，并且我已将 class="ui-btn-active" 设置为每个页面上的不同页面。
例如：
第 1 页：
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
然后如果您转到第 2 页：
第 1 页：
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
等等...
我的问题是它并不总是突出显示，有时我必须按按钮两次才能突出显示。
有谁知道如何强制其工作？
I am having a problem with jQuery mobile navigation (navbar).
I have 4 pages and I've set the class="ui-btn-active" to a different one on each page..
For example:
Page 1:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top" class="ui-btn-active">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
then if you go to page 2:
Page 1:
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="index.html" data-icon="home" data-iconpos="top">Page 1</a></li>
<li><a href="index2.html" data-icon="plus" data-iconpos="top" class="ui-btn-active">Page 2</a></li>
<li><a href="index3.html" data-icon="grid">Page 3</a></li>
<li><a href="index4.html" data-icon="star" data-iconpos="top">Page 4</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
etc...
My problem is that it's not always highlighting and sometimes I have to press the button 2 times for it to hightlight.
Does anyone have a clue on how to force this to work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
尝试将“ui-state-persist”类添加到您的锚点中。
例如：class =“ui-btn-active ui-state-persist”
Try adding the "ui-state-persist" class to your anchor.
ex: class="ui-btn-active ui-state-persist"
在活动按钮上设置指向
href=#的链接似乎可以解决这个问题。尽管您已经在该页面上，但单击活动链接，然后离开该页面并返回该页面时，似乎存在问题。
set the link to
href=#on the active button seemed to fix this for me.The problem seemed to exist when clicking on the active link although you are already on that page, then navigating away from that page and back to it.
您必须将“ui-state-persist”添加到所有锚标记，否则如果刷新页面，然后转到另一个页面，然后返回刷新的页面，它仍然会中断。
You have to add the "ui-state-persist" to all the anchor tags, otherwise it still breaks if you refresh a page, then go to another page, then come back to the page you refreshed.
这仅对我有用（在 v1.3 中），如果我在我想要突出显示的锚标记上设置 class="ui-btn-active ui-state-persist" （即每页一个），并且使用该导航栏中未设置类的其余锚标记。
This only worked for me (in v1.3) if I set class="ui-btn-active ui-state-persist" on the anchor tags of the ones I wanted to be highlighted (ie, one per page), with the rest of the anchor tags in that navbar with no classes set.