jQuery Mobile Tabs using data-role=navbar

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css">
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<div id="home" data-role="page">
    <div data-role="header" data-position="fixed">
        <h1>Header</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#" data-tab="plan" data-role="tab" class="ui-btn-active">Plan</a></li>
                <li><a href="#" data-tab="directions" data-role="tab">Directions</a></li>
                <li><a href="#" data-tab="map" data-role="tab">Map</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content">
        <div class="tabs-content">
            <div id="plan">
                  <p>Plan</p>
            </div>
            <div id="directions">
                <p>Directions</p>
            </div>
            <div id="map">
                <p>Map</p>
            </div>
        </div>               
        <script type="text/javascript">
            $('#home').on('pageinit', function (event, ui) {
                $(document).on('[data-role="navbar"] a', 'click', function () {
                    $('[data-role="navbar"] a').removeClass("ui-btn-active");
                    $('.tabs-content').children().hide();
                    $('#' + $(this).attr('data-tab')).show();
                    $("html,body").animate({scrollTop:0},500);
                    $(this).addClass("ui-btn-active");
                });
            });
        </script>
    </div>
</div>