菜单仅在一页上

Question

我并不真正了解所有这些编码术语，因此我很难找到问题的答案。我想创建一个站点菜单。因此，如果我按下一个列表项，浏览器应该在同一页面上打开其他内容。我尝试将 css 与目标一起使用，但每次我单击新目标时，目标都会重叠，旧内容不会消失。我尝试将 Javascript 与 innerHTML 一起使用，但在 javascript 中，我需要将整个页面写在一行中 (.innerHTML ='websitecode')，这将创建一个可怕的概述。

有没有其他的可能性来创造这样的东西？也许使用 php?

中的 require() / involve() 函数

谢谢

Answer 1

听起来您想创建一个单页 Web 应用程序：有很多很棒的 javascript 框架，试试 angular.

https://www.airpair.com/angularjs/building-angularjs-app-tutorial

把你的菜单放到头文件里，把你要替换的内容放到视图里。

或者使用angular UI-router https://github.com/angular-ui/ui-router/wiki

Answer 2

实现目标的可能性很小。简单但不太优雅的方法是生成完整的内容并在页面上设置锚点。从菜单中，用户可以调用锚点并将被带到页面的所需部分。示例：

<!-- Menu -->
<ul>
    <li><a href="#aboutus">About us</a></li>
    <li><a href="#products">Products</a></li>
</ul>

<!-- Page contents -->
<div id="aboutus">This is about us.</div>
<div id="products">Our products.</div>

更优雅、复杂和专业的方法是创建 SPA（单页应用程序）。它将包括一些技术，如 AJAX，您可以在不刷新的情况下加载（或删除）页面上的内容。有很多现代 JS 框架可以帮助你，例如 AngularJS、ReactJS 等

维基百科还提供了有关 SPA 的更多信息：

https://en.wikipedia.org/wiki/Single-page_application

Answer 3

根据你的问题，我的理解是你想要菜单导航而不需要再次加载内容。

`http://codepen.io/ArslanRafique/pen/raZybL`

以上是我最近使用简单 CSS 和 HTML 开发的简单菜单导航片段。您可以使用 HTML 标签实现简单的菜单导航，并可以相应地交换视图。

请查看分享的片段，希望对您有所帮助。

Answer 4

所以 Arlan 的版本看起来更漂亮，但您也可以将 javaScript 与可以隐藏或显示功能的 div 一起使用。您可以根据需要格式化 css 中的 div。如果您的菜单很长，可能会有点笨拙...

<div id="divOne">This will show some text</div>
<div id="divTwo"><p>This will show even more text</p><p>I may even format it differently</p>
</div>
<div id="divThree">This shows text that is different from the other two</div>

    var formatOne = document.getElementById("button1"); //create handle for first button 
    formatOne.onclick = function() { //add functionality
        document.getElementById("divOne").style.display = "block";
        document.getElementById("divTwo").style.display = "none";
        document.getElementById("divThree").style.display = "none";
   }

Jsfiddle 来展示功能。

https://jsfiddle.net/lattivalidus/s7a9dLe7/

菜单仅在一页上

menu on only a single page

html

javascript

css

menu