0

I write a static web pages-no server at this point.All the Headers and footers for all pages are same. There 4 buttons on header. I want to change only the part of the page between header and footer when a button in the header is clicked. For example there are 4 buttons Home, Activities etc.. If i click activities then header and footer of page should remain and activities page should come in between header and footer. How can i do that? once again -no server at the moment so ajax will not work for me. At this point I have the button codes(the page which displayed after I press the activities button for example) in separate html files.

Thanks in advance.

4

1 に答える 1

0

これを試して：

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>

サーバーは必要ありません:)

于 2012-12-13T22:49:42.733 に答える