1

ナビゲーションバーがあり、その下にあるものを変更したいだけです。Jquery モバイルを使用しています。これを見つけましたが、正しく動作しません。

<body id="stage" class="theme">
<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Welcome to the Hunt</h1>
    </div>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">Mes parties</a></li>
                <li><a href="#page2">Parties en cours</a></li>
            </ul>
        </div>
    </div>
</div>
<div data-role="page" id="page2">
    <div data-role="header">
        <h1>Welcome to the Hunt</h1>
    </div>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">Mes parties</a></li>
                <li><a href="#page2">Parties en cours</a></li>
            </ul>
        </div>
    </div>
</div>

4

2 に答える 2

0

まず、これらのページのいずれにもデータがありません。ただのナビゲーションバー...各ページにコンテンツdivを追加する必要があります。

<div data-role="content">
   <p>Welcom to page 1</p>  
</div><!-- /content -->

（2ページで、コンテンツdivが別のことを言っていることを確認してください。）

次に、ナビゲーションバーのアクティブなアイテム（ページ）を変更しません。メニューの「クラス」の部分は、現在のページの一部である必要があります。

第三に、私はあなたが</DIV>あなたのコードで比類のないものを持っていると思います

- 編集：

メニューの更新を回避するには、特定のページヘッダーにナビゲーションバーを配置し、ヘッダーIDを指定して、両方のページヘッダーでIDが同じになるようにします。

<div data-id="PersistentNav" data-position="fixed" data-role="header">

両方のページでそれを行います...

同じIDを使用すると、jqueryはメニューを更新しません。

そして今、コードで：

<body id="stage" class="theme">

<div data-role="page" id="page1">
    <div data-id="PersistentNav" data-position="fixed" data-role="header">
        <h1>Welcome to the Hunt</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" class="ui-btn-active ui-state-persist">Mes parties</a></li>
                <li><a href="#page2">Parties en cours</a></li>
            </ul>
        </div>
    </div>
    <div data-role="content">   
             <p>Welcom to page 1</p>    
    </div><!-- /content -->
</div>


<div data-role="page" id="page2">
    <div data-id="PersistentNav" data-position="fixed" data-role="header">
        <h1>Welcome to the Hunt</h1>
        <div data-role="navbar">
            <ul>
                <li><a href="#page1" >Mes parties</a></li>
                <li><a href="#page2" class="ui-btn-active ui-state-persist">Parties en cours</a></li>
            </ul>
        </div>

    </div>
    <div data-role="content">   
             <p>Welcom to page 2</p>    
     </div><!-- /content -->
</div>

</body>
于 2012-08-31T12:26:29.103 に答える
0 
<div style="margin:0 auto;">
<div data-role="page" style="width:400px" id="page1">


<div data-role="header">
    <h1>Welcome to the Hunt</h1>
</div>
<div data-role="navbar">
    <ul>
    <li><a href="#page1" class="ui-btn-activeui-statepersist">Mesparties</a></li>
        <li><a href="#page2">Parties en cours</a></li>
    </ul>
</div>
<div data-role="content">
    from 1st page
</div>

</div>


<div data-role="page" id="page2" style="width:400px">
<div data-role="header">
    <h1>Welcome to the Hunt</h1>
</div>
<div data-role="navbar">
<ul>
<li><a href="#page1" >Mes parties</a></li>
  <li><a href="#page2" class="ui-btn-active ui-state-persist">Partiesecours</a>    </li>
</ul>
</div>
    <div data-role="content">
    from 2nd page
    </div>
 </div>
 </div>

上記のコードは、navbar に基づいてコンテンツを変更します。

于 2012-08-31T12:17:31.443 に答える