將html文件的內容覆蓋到另一個html文件中

Question

是否有任何可能會與其他html文件的內容重疊。

例如我有兩個html文件在不同的文件夾，但在同一根。

HTML1：

<section> 
<div class="html1"></div> 
<section> 

HTML2：

<section> 
<div class="html2"></div> 
<section> 

現在按鈕的點擊我需要顯示HTML2的內容覆蓋，並再次在相同的按鈕，我需要的點擊隱藏html2。

任何人都可以讓我知道如何做到這一點。

Answer 1

不知道爲什麼你需要這個，但你可以做到這一點:-)

<input id="b" type="button" value="button" /> 
<section id="container" style="width:400px;height:200px;border:1px solid;font-family:Verdana"></section> 
<script> 
    var button = document.getElementById('b'); 
    var section = document.getElementById('container'); 
    var path = ['html_document1.html', 'html_document2.html']; //paths for your documents 

    function fu() { 
     var xml = new XMLHttpRequest(); 
     xml.addEventListener('readystatechange', function() { 
      if (this.readyState === 4 & this.status === 200) { 
       section.innerHTML = this.response; 
      } 
     }, false); 
     var shuffler = path.shift(); 
     path.push(shuffler); 
     xml.open('GET', shuffler, true); 
     xml.send(null); 
    } 
    window.addEventListener('load', fu, false); 
    button.addEventListener('click', fu, false); 
</script> 

Answer 2

或者你也可以做這樣的

<input id="b" type="button" value="button" /> 
<section id="container" style="width:400px;height:200px;border:1px solid;font-family:Verdana"> 
    <iframe id="ifr" style="width:100%;height:100%;border:none"></iframe> 
</section> 
<script> 
    var button = document.getElementById('b'); 
    var section = document.getElementById('container'); 
    var ifr = document.getElementById('ifr'); 
    var path = ['html_document1.html', 'html_document2.html']; //paths for your documents 
    function fu() { 
     var shuffler = path.shift(); 
     path.push(shuffler); 
     ifr.src = shuffler; 
    } 
    window.addEventListener('load', fu, false); 
    button.addEventListener('click', fu, false); 
</script>