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>

将html文件的内容叠加到另一个html文件中

2 个答案: