如何在不破坏布局的情况下更改锚文本?在这种情况下,当我触发该功能时,布局完全毁了。我想保留图标,只更改文字。
HTML:
<a href=# id="change">login</a>
<footer id="footer" data-role="footer" data-position="fixed">
<div id="nav" data-role="navbar">
<ul>
<li><a href="#" data-icon="home" data-iconpos="bottom">Home</a></li>
<li><a href="#login" data-icon="gear" data-iconpos="bottom" data-transition="flip" class="ui-btn-active ui-state-persist">Login</a></li>
<li><a href="#info" data-icon="info" data-iconpos="bottom" data-transition="flip">Info</a></li>
</ul>
</div>
</footer>
JS:
$(function(){
$("#change").click(function(){
$("li:nth-child(2) a").text("Profile");
});
});
谢谢!
答案 0 :(得分:0)
您正尝试替换 a
中link
到profile
的文字,从而取消整个标记。你必须更深入。
当您设置data-icon=somevalue
时,jQM会在span
标记内设置两个a
元素,第一个用于您的文本,另一个用于您的图标。如果您需要单独更改文字,则必须访问".ui-btn-text"
中的a
课程:
$("li:nth-child(2) a").find(".ui-btn-text").text("Profile");
演示: http://jsfiddle.net/hungerpain/xuLS2/1/
希望这有帮助! :)