TabStrip Disappear 2

by wickedw

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div data-role="view" data-layout="app" data-title="1" id="v1">
 v1
</div>
<div data-role="view" data-layout="app" data-title="2" id="v2">
    would be used but not in tabstrip
</div>
<div data-role="view" data-layout="app" data-title="3" id="v3">
    <a id="b1" class="playbutton" data-index="1232" data-click="v3" data-align="right"
        style="width: 4em;" data-role="button" data-icon="play">PLAY</a>
</div>
<div data-role="view" data-layout="app" id="history1">
    <a id="b2" class="playbutton" data-index="1232" data-click="history1" data-align="right"
        style="width: 4em;" data-role="button" data-icon="play">PLAY</a>
</div>
<div data-role="view" data-layout="app" id="history2">
</div>
<div data-role="view" data-layout="app" data-title="History" id="history3">
    would be used but not in tabstrip
</div>
<div id="header" data-role="layout" data-id="app">
    <header data-role="header">
            <div id="navbar" data-role="navbar">
                <a id="navbar_back" data-role="backbutton" data-align="left">Back</a>
                <span id="viewtitle" data-role="view-title">XYZ</span>
                
                <a data-role="button" data-click="navtop_click" data-align="right">Top</a>
            </div> 
        </header>
    <footer data-role="footer">
            <div data-role="tabstrip">
                <a href="#v1" data-role="" data-icon="play">Practice</a>
                <a href="#history1" data-icon="history">History</a> 
            </div> 
        </footer>
</div>

JavaScript

app = new kendo.mobile.Application($(document.body), {
    hideAddressBar: true,
    transition: "slide",
    initial:"history1"
});

$(document).ready(function() {

});

function v3() {
    app.navigate("#history1");
}

function history1() {
    app.navigate("#v3");
}