Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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');
    };
share|improve this question
    
Add to the other? Which one? –  Aleksandr M Jun 14 '13 at 8:05
    
Sorry, I mean having the option with span content Month being selected and changing to option with span content Day. –  MdaG Jun 14 '13 at 8:07
    
Basically detecting which anchor holds the span option Day? I'm interested in a more general solution as the number of nav buttons might increase in the future. –  MdaG Jun 14 '13 at 8:08
    
So you need to detect link with span with Day text in it, and then what? –  Aleksandr M Jun 14 '13 at 8:15
    
Add the css class there. –  MdaG Jun 14 '13 at 8:16
add comment

closed as too localized by Aleksandr M, Stewie, bahrep, skuntsel, gabrielhilal Jun 14 '13 at 11:32

This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

up vote 2 down vote accepted

I suggest you to add different ID for your two <a..> tags to access them easily, you can then do

<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");

share|improve this answer
    
Very nice! So simple I should've thought of that myself. Doh! –  MdaG Jun 14 '13 at 8:17
add comment

It's very simple. you don't need to change any html. Here is the working example:

$(".ui-block-a a").removeClass("ui-btn-active");
$(".ui-block-b a").addClass("ui-btn-active");
share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.