CODEWITHSUNDEEP
jquerymobiletabs
user867241
user867241

Reputation:

Jquery Mobile - Highlight a tab

I have a doubt in jquery mobile. I have set up a navigation bar. But I don't how to keep it highlighted on selecting a particular tab. I am aware of the class ui-btn-active but don't know how to apply it into the tab selected. Someone out there please provide a solution?

Upvotes: 3

Views: 6598

Answers (2)

Ranushka Goonesekere
Ranushka Goonesekere

Reputation: 386

I think this will work for you:

li.ui-tabs-active > a {
    background-color: rgb(51, 136, 204)!important;
    border-color: rgb(51, 136, 204) !important;
    color: rgb(255, 255, 255) !important;
    text-shadow: 0 1px 0 rgb(0, 85, 153) !important;
}

Upvotes: 1

Neil
Neil

Reputation: 6039

Jquery Mobile - Highlight a tab

Use div tag instead of page. You can use javascript to highlight a tab (assign class ui-btn-active ) at the runtime when the DIV corresponding to the Tab is rendered .Another advantage of using div instead of page is that the navigation bar will be persistent throughout , unlike in case of page where you have to have repeat the navbar code in all pages.

You can show and hide the div when the tab is clicked and notice the code

See the following solution jQuery Mobile Navigation Tabs

Notice the following code 

$(this).addClass('ui-btn-active');

This will highlight the current tab when it is clicked.

Upvotes: 5

Related Questions