Question

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

还有其他可能创造这样的东西吗？也许在php中使用require（）/ involved（）函数？

谢谢

Answer 1

根据您的问题，我理解的是您希望菜单导航而不再重新加载内容。

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

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

请查看共享代码段，希望它能为您提供帮助。

Answer 2

听起来您想要创建单页面Web应用程序：有很多很棒的javascript框架，请尝试使用angular。

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

将您的菜单放在标题文件中，并将要替换的内容放入视图中。

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

Answer 3

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

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

所以Arlan的版本看起来更漂亮，但你也可以使用带有div的javaScript，你可以隐藏或显示函数。你可以用你想要的任何方式格式化你的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/

菜单只在一个页面上

4 个答案: