Specifying the styles for the selected tab in a navbar

Question

I have the following html code

Answer 1

Combine css classes.

HTML:

<li><a href="#" data-icon="custom" class="home ui-btn-active">Home</a></li>
<li><a href="#" data-icon="grid" class="two">Second page</a></li>
<li><a href="#" data-icon="star" class="three">Third page</a></li>

CSS:

.home.ui-btn-active {
    background:red !important;
}
.two.ui-btn-active {
    background:green !important;
}
.three.ui-btn-active {
    background:blue !important;
}

Updated Fiddle:

http://jsfiddle.net/8pwFK/3/

Answer 2

Add a id to each element you want to style like so with css:

Live Example:

• http://jsfiddle.net/phillpafford/8pwFK/4/

HTML:

<li><a href="#" data-icon="custom" class="ui-btn-active" id="custom-li-1">Home</a></li>
<li><a href="#" data-icon="grid" id="custom-li-2">Second page</a></li>
<li><a href="#" data-icon="star" id="custom-li-3">Third page</a></li>

CSS:

#custom-li-1.ui-btn-active {
    background:green !important;
}

#custom-li-2.ui-btn-active {
    background:red !important;
}

#custom-li-3.ui-btn-active {
    background:blue !important;
}

Docs for Custom Icons:

• http://jquerymobile.com/demos/1.0b1/docs/buttons/buttons-icons.html
• http://jquerymobile.com/demos/1.0b1/docs/toolbars/docs-navbar.html

Custom Icons

To use custom icons, specify a data-icon value that has a unique name like myapp-email and the button plugin will generate a class by prefixing ui-icon- to the data-icon value and apply it to the button. You can then write a CSS rule that targets the ui-icon-myapp-email class to specify the icon background source. To maintain visual consistency, create a white icon 18x18 pixels saved as a PNG-8 with alpha transparency.

and

Using 3rd party icon sets

You can add any of the popular icon libraries like Glyphish to achieve the iOS style tab tab that has large icons stacked on top of text labels. All that is required is a bit of custom styles to link to the icons and position them in the navbar. Here is an example using Glyphish icons and custom styles (view page source for styles) in our navbar:

Related Links:

• A bottom navbar in jQuery mobile looking like iPhone navbar, possible?
• http://jsfiddle.net/vh4Ca/62/

UPDATE:

Here is the what I think you're looking for:

• http://jsfiddle.net/phillpafford/8pwFK/29/

JS:

$('#custom-li-1').click(function() {
    $(this).attr('data-icon','star');
    $(this).children().children().next().removeClass('ui-icon-custom').addClass('ui-icon-star');
}).page();

$('#custom-li-2').click(function() {
    $(this).attr('data-icon','home');
    $(this).children().children().next().removeClass('ui-icon-grid').addClass('ui-icon-home');
}).page();

$('#custom-li-3').click(function() {
    $(this).attr('data-icon','grid');
    $(this).children().children().next().removeClass('ui-icon-star').addClass('ui-icon-grid');
}).page();