navbar onLoad in content

by jch02140

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css">
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<div data-role="page">
    <div data-role="content">
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-href="a">One (A)</a></li>
                <li><a href="#" data-href="b">Two (B)</a></li>
            </ul>
        </div><!-- /navbar -->
        <div class="content_div">onLoad Content</div>
        <div id="a" class="content_div">Some 'A' Content</div>
        <div id="b" class="content_div">Some 'B' Content</div>
    </div>
</div>

CSS

#a, #b {
        display: none;
    }

JavaScript

$('div[data-role="controlgroup"] a').live('click', function () {
    $(this).addClass('ui-btn-active');
    $('div.content_div').hide();
    $('div#' + $(this).attr('data-href')).show();
});