javascript - 如何仅更改网页静态页面的内部？

Question

我写了一个静态网页——此时没有服务器。所有页面的页眉和页脚都是相同的。标题上有 4 个按钮。单击页眉中的按钮时，我只想更改页眉和页脚之间的页面部分。例如，有 4 个按钮主页、活动等。如果我单击活动，则页面的页眉和页脚应保留，活动页面应位于页眉和页脚之间。我怎样才能做到这一点？再一次 - 目前没有服务器，所以 ajax 对我不起作用。此时，我在单独的 html 文件中有按钮代码（例如，在我按下活动按钮后显示的页面）。

提前致谢。

Answer 1

尝试这个：

HTML：

  <input name="" type="button"onclick="hideLayer('btn2content'); hideLayer('btn3content'); hideLayer('btn4content'); showLayer('btn1content');" value="btn1" />
  <input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn3content'); hideLayer('btn4content'); showLayer('btn2content');" value="btn2" />
  <input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn2content'); hideLayer('btn4content'); showLayer('btn3content');" value="btn3" />
  <input name="" type="button"onclick="hideLayer('btn1content'); hideLayer('btn2content'); hideLayer('btn4content'); showLayer('btn4content');" value="btn4" />

名为“content-wrapper”的新区域（如下）是您所有内容的所在；这一切都显示在同一页面上。

<div id="content-wrapper">
  <div id="btn1content" style="display:block;" onclick="">stuff</div>
  <div id="btn2content" style="display:none;">more stuff</div>
  <div id="btn3content" style="display:none;">other stuff</div>
  <div id="btn4content" style="display:none;">that stuff</div>
</div>

Javascript：

<script type="text/javascript">
<!--
    function hideLayer(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'block')
        e.style.display = 'none';
    }
//-->
</script>
<script type="text/javascript">
<!--
    function showLayer(id) {
        var e = document.getElementById(id);
        if(e.style.display == 'none')
        e.style.display = 'block';
    }
//-->
</script>

不需要服务器:)