Any way to set Jquery UI Mobile navbar status with Javascript?

Question

I've the following navbar using the Jquery mobile UI 1.01 framework;

<div id="footer" data-role="footer" data-position="fixed">      
<div data-role="navbar">
    <ul>
        <li><a href="#" onClick="toggle_units();" class="ui-btn-active">Oilfield</a></li>
        <li><a onClick="toggle_units();">Metric</a></li>
    </ul>
</div><!-- /navbar -->

Essentially it provides users the ability to select on any page which units system to use. I'd like to be able to ensure that when they browse to a different page the same units selection is highlighted.

Is there any method in JavaScript to select a number of navbar(s) existing in multiple pages (single document) and set a certain button to active/inactive?

Answer 1

I don't know if this solution will suit your needs, but you can add a class to your link, eg, 'toggle-units-button' and then do a

$('.toggle-units-button').trigger('click').