在每个 shtml 页面 phonegap 上包含导航栏答案

【问题标题】：Include navbar on every shtml page phonegap在每个 shtml 页面 phonegap 上包含导航栏
【发布时间】：2014-02-11 14:11:40
【问题描述】：

我正在使用 phonegap 创建一个 web 应用程序，其中我使用  在每个 shtml 页面上包含一个导航栏当我在浏览器中测试它时它工作正常，但是当我构建和运行 phonegap 时，导航栏不包括在内。有谁知道为什么？

更新： 这是我的简单 index.html 代码，除了包含导航栏外，这里没有实现任何功能：

<!doctype html>
<html>

<head>
<title> DJKongsy - Home</title>
</head>
<body>
    <!--#include file="navbar.html" -->
</body>
</html>

导航栏是使用引导程序创建的，这有助于找出它为什么不起作用吗？

更新 2.0：

我在这里测试 Liam 的解决方案。

<nav class="navbar navbar-default" role="navigation">
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
    <ul class="nav nav-pills navbar-left">
        <li class="active"><a href="index.html">Home</a></li>
        <li class="active"> <a href="musictab3.shtml">Music</a></li>
        <li class="active"><a href="abouttab.shtml">About</a></li>
        <li class="active"><a href="gigs.shtml">Gigs</a></li>
    </ul>
    <ul class="nav nav-pills navbar-right">
      <li class="active"><a id="userLink" href="logintab.shtml">Log in</a></li>
    </ul>

  </div><!-- /.navbar-collapse -->
</nav>
<div id="pageContent">
    <h1>CONTENT</h1>
</div>
<script>

    $(document).ready(function(){
        var user = $.jStorage.get('userInfo');
        if(user.username!=''){
            document.getElementById('userLink').innerHTML=user.username;
        }
        else{
            document.getElementById('userLink').innerHTML="Log in";
        }
        $( "a" ).on( "click", function( event ){
           // Prevent the usual navigation behavior
           event.preventDefault();
            $.get($(this).attr("href"), function(data) {
                var resp = $(data);
                $("#pageContent").html($("#pageContent", resp).html());
                $('#pageContent').load('gigs.shtml #pageContent');
            }); 
        });
    });
</script>

如何使导航栏中每个选项卡的内容在单击时显示？例如，div“pageContent”中有什么内容？

下面的代码用于从页面获取静态 html 信息，但它不能运行我的 <script> 标记中的内容。为什么？

$('#pageContent').load('gigs.shtml #pageContent');

【问题讨论】：

能否请您发布您的代码

标签： jquery twitter-bootstrap cordova shtml

【解决方案1】：

最好的方法（我自己做过）是将导航栏放在 index.html 文件中（不是“包含文件”），然后使用 jquery 将每个页面内容拉入您的主页/主页，效果很好。

所以索引：

<html>
    <head>
        <title>
            Blahblah
        </title>
    </head>
    <body>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
        <div id="pageContent">
            <h1>CONTENT</h1>
        </div>
    </body>
</html>

然后是脚本...

 $(document).ready(function(){
        $( "a" ).on( "click", function( event ){
          // Prevent the usual navigation behavior
          event.preventDefault();
               $.get($(this).attr("href"), function(data) {
                    var resp = $(data);
                    $("#pageContent").html($("#pageContent", resp).html());
                }); 
        });
});

【讨论】：

感谢您的回复。你确定没有更简单更好的想法吗？这似乎是做一件简单事情的困难方法。
更简单？不太确定。更好的？我不这么认为。这也将有助于您的应用程序的速度，因为它不会再次加载页面和库，只是中间的内容。
好的，我正在尝试您的解决方案。如何将不同页面中的数据加载到“pageContent”div 中。 'event.preventDefault()' 阻止了 onClick 事件的发生，那么当我单击导航栏时内容如何变化？请参阅原始问题中的更新。
它不会再次运行您的脚本，它只会加载 pageContent div 中的内容。您最初的问题没有任何脚本，我不是通灵者。