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 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>

上面的代码将根据导航栏改变内容。

于 2012-08-31T12:17:31.443 回答
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 回答