Question

请任何人帮助我。我是编码的新手。我想仅使用HTML, CSS, JS (for cross- platform next time)创建一个新的Android应用程序。我好几天都遇到了这个问题。我完成了我的第一页（index.html）并将执行另一个页面，但是当我链接到其他页面时，侧面导航菜单消失。我不想在我的项目的每个页面中复制和粘贴旁边navigation menu它不干净。我认为有更容易的方法，但我还不知道。我严格只使用HTML CSS JS。我能怎么做。

Answer 1

我认为你在这里混合了两个要求，首先是能够拥有一个模板化的HTML网页视图，所有页面上都有一个侧边栏。还有一些开发移动应用程序，可以在包括Android和IOS在内的所有设备上运行。

第一个问题 - 跨页面共享相同的侧边栏

您可以使用引导程序模板实现侧栏，here您可以找到许多侧栏示例。要使它与其他页面共享，您可以使用Jquery或Vanilla JS来完成this post。或者您可以使用其他MVC框架，如Angular或react或Vue。

第二个问题 - 新的Android应用程序（用于跨平台）

通过简单的HTML，CSS＆amp; JS你可以查看ionic framework，它可以让你像创建网络应用程序一样创建移动应用程序，并且可以根据需要将其发送到Android或IOS。

或者您可以查看Google's PWA，其执行的操作类似于复杂程度较低或代码更改（目前还不支持IOS，但用户可以在浏览器上查看Web应用程序）。

所有这一切都是一种理想的方式，首先要确定您认为适合您需求的技术和框架。然后继续创建实际的HTML，CSS＆amp; JS编码标题，侧边栏，页脚和＆amp;含量

Answer 2

所以你想上老学，对吧？您需要首先考虑的是基于组件的设计。在上面的示例中，您的侧边栏是您希望在每个页面上包含的组件。但是，在纯HTML，CSS和JS中，这将是一个噩梦，但仍然可行。但是，我会建议研究一个基于组件工作的简单框架（想想React，Angular，Vue等等），但鉴于你对编码不熟悉，这是一个很大的进步，所以这里＆＃ 39;是目前最简单的解决方案。

在单独的文件中创建侧边栏，您的所有HTML都将存在此处（例如sidebar.html）。

接下来，在您希望使用侧边栏的每个页面中，将您的html拆分为两个部分。

<div id="sidebar_container"></div>
<div id="content"> Content stuff goes here! </div>

现在，您需要一些JS将新的侧边栏组件拉入每个文件中。为此，我们首先找到sidebar_container作为其ID的元素，然后加载文件内容，并将其作为innerHTML注入容器。

function loadComponentFromFile(filepath, location) {
   var client = new XMLHttpRequest();
   client.open('GET', filepath);
   client.onreadystatechange = function() {
        location.innerHTML = client.responseText;
   }
   client.send();
 }

 var sidebar_container = document.getElementById("sidebar_container");
 var content = loadComponentFromFile('./sidebar.html', sidebar_container);

在每个页面的主体底部包含您的JS脚本（作为外部文件），因此HTML在JS激活之前呈现。繁荣。基于香草成分的设计。

注意：应该进行大量的验证/检查，但为了简洁，我将其排除在外

Plunkr示例：https://plnkr.co/4Dtl50

Answer 3

//添加js

 use window.onload=fn;
    function fn(){
    var u=document.getelementById("nav");
    u.innerHtml="your code of navbar";
    }

//在html

中添加id为nav的div

<div id="nav"></div>

侧面导航菜单如何保留在每个页面中

3 个答案: