我希望能够从一个锚标记中删除“ui-btn-active”类并将其添加到另一个锚标记中。这是通过单击导航栏按钮(jQuery Mobile)自动完成的,但我有一个从月到日的快捷方式,不会触发类更改。如何在不使用循环遍历DOM并使用字符串匹配(或正则表达式)的情况下优雅地执行此操作,这可能吗?
<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
<ul class="ui-grid-a">
<li class="ui-block-a">
<a href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
<span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span></span></span>
</a>
</li>
<li class="ui-block-b">
<a href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
<span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
</a>
</li>
</ul>
</div>
</header>
这会将其删除,但如何将其添加到另一个?
$('a.ui-btn-active').removeClass('ui-btn-active')
修改
我为每个锚标签提供了与span innerText相同的ID。
var setActiveNavbarButton = function(buttonName) {
$('a.ui-btn-active').removeClass('ui-btn-active');
$('#' + buttonName).addClass('ui-btn-active');
};
答案 0 :(得分:2)
我建议您为两个<a..>
标记添加不同的ID以便轻松访问它们,然后您可以
<header id="view-navigation-view" class="button-list">
<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
<ul class="ui-grid-a">
<li class="ui-block-a">
<a id="link_1" href="#" class="ui-btn-active ui-btn ui-btn-up-c ui-btn-inline" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true">
<span class="ui-btn-inner"><span class="ui-btn-text"><span>Day</span> </span></span>
</a>
</li>
<li class="ui-block-b">
<a id="link_2" href="#" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline">
<span class="ui-btn-inner"><span class="ui-btn-text"><span>Month</span></span></span>
</a>
</li>
</ul>
</div>
</header>
$("#link_1").removeClass("ui-btn-active");
$("#link_2").addClass("ui-btn-active");
答案 1 :(得分:1)
这很简单。你不需要改变任何HTML。 以下是工作示例:
$(".ui-block-a a").removeClass("ui-btn-active");
$(".ui-block-b a").addClass("ui-btn-active");