Javascript 导航栏按钮上的 jquery mobile force ui-btn-active
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6090922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery mobile force ui-btn-active on navbar button
提问by Satch3000
I am having a problem with jQuery mobile navigation (navbar).
我在使用 jQuery 移动导航（导航栏）时遇到问题。
I have 4 pages and I've set the class="ui-btn-active" to a different one on each page..
我有 4 页，我在每一页上都将 class="ui-btn-active" 设置为不同的页面。
For example:
例如：
Page 1:
第 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:
那么如果你去第2页：
Page 1:
第 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?
有没有人知道如何强制它起作用？
回答by Mobius009
Try adding the "ui-state-persist" class to your anchor. ex: class="ui-btn-active ui-state-persist"
尝试将“ui-state-persist”类添加到您的锚点。例如：class="ui-btn-active ui-state-persist"
回答by TMNetworks
set the link to href=#on the active button seemed to fix this for me.
将链接设置为href=#活动按钮似乎为我解决了这个问题。
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.
尽管您已经在该页面上，但单击活动链接时似乎存在问题，然后从该页面导航并返回该页面。
回答by Marius St?nescu
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.
您必须将“ui-state-persist”添加到所有锚标签，否则如果您刷新页面，然后转到另一个页面，然后返回到您刷新的页面，它仍然会中断。
回答by Matt Parkins
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.
如果我在要突出显示的锚标记（即每页一个）上设置 class="ui-btn-active ui-state-persist"，这仅对我有用（在 v1.3 中），该导航栏中的其余锚标记没有设置类。
