div隐藏和显示

Question

我在一家公司的网站上工作（我的第一个，除了我自己的网站），我有点困惑。我知道我之前知道这一点，但我已经忘记了。

我将在网站上创建许多不同的页面，我想为每个页面创建一个新文件不是一个好主意。

并且我认为最好的方法是在索引文件中为每个页面制作一个“div”，然后以某种方式将所有页面放在彼此之后，当我单击菜单中的正确内容时逐个显示......我该怎么做？

我可以只使用CSS还是需要一些Java脚本，我该如何编写代码？

非常感谢快速帮助！ ：）

Answer 1

您正在谈论制作一个包含所有公司网站内容的HTML页面。以这种方式建立公司网站是一个坏主意，原因如下：

• Web浏览器希望浏览具有多个页面的网站，这就是为什么他们有一个位置栏和前进/后退按钮。你的方法打破了这两种方式。
• 此单页会更大，并且需要更长时间才能加载到用户的网络浏览器中。
• 页面的搜索引擎优化会很差，因为谷歌和其他蜘蛛的内容很难在语义上理解。一个包含大量文字的大页面看起来像谷歌的关键字填充，并将受到惩罚。
• 要保持这样的页面组织是很困难的;对任何内容进行任何更改都需要您编辑单个文件，因此您更难以跟踪和/或合并对不同文档的更改，并且公司更难以进行内容更改。
• 最后，该方法只是不合适。你是对的，为每个页面创建一个静态HTML文件并不是很好。但解决方案不是制作单个网页;解决方案是使用CMS！

Wordpress是世界上最受欢迎的CMS。它专为博客设计，但可用于任何网站。 Drupal是一个功能强大的CMS，具有许多您可能不需要的功能，但它比Wordpress更现代，并且可能更具视觉灵活性。

如果您不想使用功能齐全的CMS并且想要修改一些编程，那么您可以尝试使用现成的MVC框架，如Rails或{{3}但请记住，那些将需要你学习一点Ruby或Python。

主要的是你应该使用服务器端模板来解决你遇到的问题，而不是客户端的JavaScript。

（一些非常大的网站确实使用JavaScript驱动的页面导航方法，但这些方法通常像Twitter一样 Web应用程序。这种方法不适合公司网站。）

Answer 2

您可以使用Javascript更改元素的innerHTML。 例如，创建一个div并为其指定ID“myDiv”：

<div id="myDiv"></div>

然后，当用户点击一个按钮时，您可以像这样更改“myDiv”的innerHTML（通过调用该函数）：

function show(){
   document.getElementById("myDiv").innerHTML="html code here";
}

我希望我帮助过： - ）