Question

我有一个导航栏，我只想更改下面的内容。我正在使用Jquery mobile。我发现了这个，但它没有做好。

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

Answer 1

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

以上代码将根据导航栏更改内容。

Answer 2

首先，您没有任何这些页面上的数据。只是一个导航栏...... 你应该为每个页面添加一个内容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>

使用导航栏更改数据内容

2 个答案: