Как я могу загрузить несколько html файлов в Div

Question

вот мой случай, я работал над онлайновым руководством для компании, в которой я работаю, и недавно я решил улучшить его, изменив некоторые визуальные элементы, поэтому я подумал, почему бы не использовать bootstrap, и поэтому я сделал. Вот в чем дело, у меня есть древовидное представление, где у меня есть каждая часть (заголовки) руководства, и эти заголовки загружают файл HTML, где у меня есть информация и ссылки на файл CSS. Раньше я загружал контент в Iframe, но это кажется ужасной идеей для всех проблем, с которыми я сталкивался, пытаясь применить CSS, поэтому я решил использовать DIV'S вместо Iframe.

Здесь возникает вопрос:

Есть ли способ загрузить все несколько элементов HTML ФАЙЛЫ В ОДНОМ DIV, НАЖИМАЯ КАЖДЫЙ РАЗ НАЗВАНИЕ?

Потому что все заголовки содержатся в теге "a", и затем я использую его для нацеливания в Iframe, но теперь с DIV'S

все не так просто, я попробовал немного JavaScript и ничего, с Jquery единственное, что я сделал, - это создание функции, которая загружает указанный файл c html и пытается добавить к нему некоторые параметры, и он не распознает путь для этих HTML файлов, и то же самое происходит с Inner HTML.

PD: эти файлы локально размещены на сервере, где они отображаются

Вот немного немного того, что я получил ...

JS:

     <script type="text/javascript">
        $(document).ready(function(){
          $('#content').load('intro.html')
        });
     </script>

* 10 39 *:

<div class="bg-light border-right" id="sidebar-wrapper">
      <div class="list-group list-group-flush">
        <ul id="tree3" class="list-group-item list-group-item-action bg-light">          
            <li><a href="PATHFILE_1">TITLE 1</a>
                <ul>
                    <li><a href="PATHFILE_2">TITLE 2</a></li>
                    <li><a href="PATHFILE_3">TITLE 3</a>
                </ul>
            </li>
       </div>
</div>

И желание отобразить все файлы в этот div:

<div id="page-content-wrapper">
  <div class="container-fluid">
    <div id="content">
      HERE THE HTML FILES
    </div>
  </div>
</div>

Answer 1

Насколько я знаю, вы не можете загрузить несколько HTML файлов в один div контейнер.

Но почему бы вам просто не использовать несколько div элементов внутри вашего #content? Вы можете генерировать эти divs динамически при нажатии на одну из гиперссылок. Каждый div будет загружать один из ваших HTML файлов.

Структура HTML остается такой же, как вы разместили ее выше. В JavaScript / jQuery это будет выглядеть примерно так:

$('#tree3').on('click', 'a', function (e) {
  e.preventDefault(); 
  e.stopImmediatePropagation(); 

  // clear the entire content div
  $('#content').empty(); 

  let parentLi = $(this).closest("li"); 

  // load the HTML content for the hyperlink that has been clicked.
  let dynamicDiv = $('<div></div>'); 
  $('#content').append(dynamicDiv); 
  dynamicDiv.load($(this).attr('href'), function(){
    // done loading the main HTML content 
  });

  // check if there is a list inside the li element
  let subList = parentLi.children("ul");
  if(subList.length && subList.length > 0){
    $.each(subList.children("li"), function(k, v){
      let subLi = $(v); 
      let hyperlink = $('a', subLi).attr('href'); 

      // load the HTML content for each of the sub entries
      let dynamicDiv = $('<div></div>'); 
      $('#content').append(dynamicDiv); 
      dynamicDiv.load(hyperlink, function(){
        // done loading...
      });
    });
  }
}); 

Если вы хотите иметь более двух уровней в своем списке, вы можете изменить код и сделать его рекурсивным. Поэтому вместо того, чтобы итерировать элементы li в subList один раз, вам придется проверить, содержат ли эти элементы li другие subLists рекурсивно. Общий лог c для генерации divs и загрузки контента HTML останется прежним.

Для стилизации я рекомендую дать основному #content контейнеру overflow-y: auto. Таким образом, у вас есть только одна полоса прокрутки для всего контента. divs, которые генерируются динамически, изменят свою высоту в соответствии с содержимым HTML.

Answer 2

Я рекомендую вам добавить класс к a элементам, которые вы хотите загрузить в div, например class='dynamic'. Установите обработчик щелчка для всех этих a.dynamic элементов, получите ссылку, используя атрибут href цели, и используйте protectDefault, чтобы поведение по умолчанию (навигация) не срабатывало:

$(body).on("click", "a.dynamic", function(event) {
  $('#content').load(event.target.href);
  event.preventDefault();
}

Не забудьте добавить класс по ссылкам:

<a class="dynamic" href="PATHFILE_2">TITLE 2</a>

Обратите внимание, что динамически загруженный HTML должен иметь только частичное содержимое, без тегов html или body. При этом лучше не использовать элементы a для запуска загрузки:

<div class="dynamic" data-href="PATHFILE_2">TITLE 2</div>

И получить URL с помощью этого:

$('#content').load(event.target.dataset.href);