jQuery Forum

It is up to you to set the .ui-btn-active class on the active button(s). The specifics depend on your own program logic. It is not a given that there is a single "active" button. You might have one, none, two, or any number. As such, jQuery Mobile can't do it for you.

You need to build whatever logic you need into your template.

I wrote a little one-line helper for the Middleman static site generator that lets me do something like this in a template. (It's a Slim template, BTW, similar to HAML, that's why the inside-out HTML syntax...)

1. ul
2.   li
3.     a*active('about') href="about.html" ABOUT
4.     a*active('sponsors') href="sponsors.html" SPONSORS

The "active" helper compares the basename (not including extension) of the file currently being generated with the passed string. If they match, it sets the class ui-btn-active.

The below won't be useful unless you happen to be using Middleman:

1. def active(basename)
2.   basename ==  
   
3.     Pathname.new(current_page.destination_path).basename.to_s.sub(/\..*/,'')
4.     ? {'class' => 'ui-btn-active'} : {}
5. end

thanks for your great reply

the active theme is default as data-theme="b".. how to change the theme to c or d or a???

There is no such thing as an "active theme".

There is a single active color. Theme does not affect it. I don't agree with that design, but that's the way it is. You can change it in Themeroller or override it in your CSS.