Добавление содержимого файла в html без перезагруки сайта (HTML,JS)

Question

Нужно реализовать, чтобы при нажатии на Link1, Link2, Link3, etc..., подгружалось содержимое html и article, а также менялся url в зависимости, на какую кнопку нажали.

<body>
  <div id="nav">
    <ul>
      <li><a class="button1" tabindex="0">Link 1</a></li>
      <li><a class="button1" tabindex="0">Link 2</a></li>
      <li><a class="button1" tabindex="0">Link 3</a></li>
      <li><a class="button1" tabindex="0">Link 4</a></li>
      <li><a class="button1" tabindex="0">Link 5</a></li>
    </ul>
  </div>
  <main>
    <article id="article">
      <h1>Text</h1>
    </article>
  </main>
</body>

Answer 1

Пример подключения html файла в файл.
В данном примере при нажатии кнопки в div с `id="acticle"' будет загружаться другой файл html, линк которого указан на кнопке.

$( document ).ready(function() {
    var z = $('.button1');
    z.each(function () {
        $(this).click(function() {
            var text = $(this).text();
            $("#article").load(text);
        });
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav">
    <ul>
        <li><a class="button1" tabindex="0">bz.html</a></li>
        <li><a class="button1" tabindex="0">Link1.html</a></li>
        <li><a class="button1" tabindex="0">Link2.html</a></li>
        <li><a class="button1" tabindex="0">Link3.html</a></li>
        <li><a class="button1" tabindex="0">Link4.html</a></li>
    </ul>
</div>
<main>
    <article id="article">
        <h1>Text</h1>
    </article>
</main>

(старое) Пример передачи текста в другое поле(обратите внимание на комментарии):

    window.onload = function () {
        var z = document.getElementsByClassName('button1'); // Ищем все кнопки с классом

        for (let i = 0; i < z.length; i++){
            z[i].onclick = function () { //При нажатии на кнопку
                let new1 = document.getElementById('article'); // Ищем элемент с классом article
                let elem = new1.getElementsByTagName('h1'); // В нём ищем элемент с тегом h1
                elem[0].innerText = z[i].innerText; // Записываем
            }
        }
    }

<div id="nav">
    <ul>
        <li><a class="button1" tabindex="0">Link 1</a></li>
        <li><a class="button1" tabindex="0">Link 2</a></li>
        <li><a class="button1" tabindex="0">Link 3</a></li>
        <li><a class="button1" tabindex="0">Link 4</a></li>
        <li><a class="button1" tabindex="0">Link 5</a></li>
    </ul>
</div>
<main>
    <article id="article">
        <h1>Text</h1>
    </article>
</main>
</body>

БЛОГ НА HUSL

Добавление содержимого файла в html без перезагруки сайта (HTML,JS)

Ответы (1 шт):