I want to be able to remove class "ui-btn-active" from one anchor tag and add it to the other. This is done automatically by clicking the navbar button (jQuery Mobile), but I have a shortcut from Month to Day that doesn't trigger the class change. How can I do this elegantly without resorting to looping through the DOM and use string matching (or regex), is that possible?
<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>
This removes it, but how to do I add it to the other?
$('a.ui-btn-active').removeClass('ui-btn-active')
edit
I gave each anchor tag the same ID as the span innerText.
var setActiveNavbarButton = function(buttonName) {
$('a.ui-btn-active').removeClass('ui-btn-active');
$('#' + buttonName).addClass('ui-btn-active');
};
Day
text in it, and then what? – Aleksandr M Jun 14 '13 at 8:15