Question

我写了一个静态网页 - 此时没有服务器。所有页面的所有页眉和页脚都是相同的。标题上有4个按钮。我想在单击标题中的按钮时仅更改页眉和页脚之间的页面部分。例如，有4个按钮Home，Activities等。如果我点击活动，那么页面的页眉和页脚应该保留，活动页面应该在页眉和页脚之间。我怎样才能做到这一点？再一次 - 目前没有服务器所以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>

无需服务器：）

如何才能仅更改网页内部的静态页面？

1 个答案: