Блог

Главная - Вопросы по программированию - Наложение содержимого html-файла на другой html-файл

Наложение содержимого html-файла на другой html-файл

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

Есть ли возможность наложить содержимое внутреннего html на другие.

Например, у меня есть два html-файла в разных папках, но в одном корне.

HTML1:

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

HTML2:

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

Теперь при нажатии кнопки мне нужно отобразить содержимое html2 в виде наложения и снова при нажатии той же кнопки мне нужно скрыть html2.

Может кто-нибудь сообщить мне, как этого добиться.

Комментарии:

1. почему бы не отобразить none current и не заблокировать отображение следующего элемента?

2. Я думаю, вы ищете этот подход: api.jquery.com/load

3. Я написал это некоторое время назад, но я думаю, что это решение вашего вопроса — jsfiddle.net/jayblanchard/4qNJu

Ответ №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 amp; 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>

Ответ №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>
Метки: