javascript - javascript コントロール タブ ページの使用方法

Question

2ページ作りました。1 つは と呼ばれhome.html、 にリンクしていますproducts.html。これをテストするときは、 を開きhome.html、 へのリンクをたどりますproducts.html。しかし、JavaScript はproducts.html機能しません (以下のコードを参照)。

これはproducts.html次のとおり です。

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>
            page1
        </h1>
    </div>
    <div data-role="content">
        Content1</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page1-->

<div data-role="page" id="page2">
    <div data-role="header">
        <h1>
            page2
        </h1>
    </div>
    <div data-role="content">
        Content2</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Two</a></li>
                <li><a href="#page3">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page2-->

<div data-role="page" id="page3">
    <div data-role="header">
        <h1>
            page3
        </h1>
    </div>
    <div data-role="content">
        Content3</div>
    <div data-id="PersistentFooter" data-role="footer" data-position="fixed">
        <div data-role="navbar">
            <ul>
                <li><a href="#page1">One</a></li>
                <li><a href="#page2">Two</a></li>
                <li><a href="#page3" class="ui-btn-active ui-state-persist">Three</a></li>
            </ul>
        </div>
    </div>
</div><!-- end page3-->

ユーザー ali-carikcioglu のおかげで、動作するフィドルがhttp://jsfiddle.net/JkYSa/で利用できるようになりました。

なぜこれが機能しないのか、誰かが私に説明できますか?