Клонировать весь контейнер div на другой странице

У меня есть контейнер div, который содержит несколько других элементов div и другое содержимое, которое в совокупности составляет мое слайд-меню sidenav.

Я хотел бы вызвать весь этот div с другой страницы. Я попробовал некоторые предложенные методы jquery, но до сих пор не повезло.

Это сокращенная версия того, как выглядит раздел...

<!--Opening div for menu container-->
<div id="menuContainer">

  <div>
    <div>
      <span class="menu">
        <a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
          <p class="subMenuOpenBtn">Open&nbsp; &#9660;</p>
        </a></span></div>
      <div id="CollapsiblePanel_1" class="CollapsiblePanel">
        <div class="tab">
          <div class="subMenu">
          <ul>
            <a href="#"><li>Option 1</li></a>
            <a href="#"><li>Option 2</li></a>
            <a href="#"><li>Option 3</li></a>
            <a href="#"><li>Option 4</li></a>
            <a href="#"><li>Option 5</li></a>
          </ul>
          <div class="subMenuCloseBtn">
            <span><a href="#" onclick="CollapsiblePanel_news.close();">Close&nbsp; &#9650;</a>
            </span>
         </div>
</div><!--Closing div for menu container-->

Я хочу сохранить весь этот бит кода на своей странице под названием "SlideOutPage" (я не совсем уверен, должна ли страница tat быть сохранена в html, php или другой странице типа)

Затем... на моей странице index.php я хочу создать новый div или "контейнер" и каким-то образом вызвать этот раздел кода в него.

Источник

2 ответа

Решение

Разница между различными методами

Лучший способ сделать это - использовать PHP, поскольку он является языком сценариев бэкэнда и не будет виден посетителю. Если кто-то посещает веб-страницу, он выглядит для него нормально.

Через JQuery это будет видно в исходном коде. Таким образом, посетитель каким-то образом может узнать, что он извлекает div из другого файла.

<!-- external file `menu.html`
Opening div for menu container-->
<div id="menuContainer">

  <div>
    <div>
      <span class="menu">
        <a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
          <p class="subMenuOpenBtn">Open&nbsp; &#9660;</p>
        </a></span></div>
      <div id="CollapsiblePanel_1" class="CollapsiblePanel">
        <div class="tab">
          <div class="subMenu">
          <ul>
            <a href="#"><li>Option 1</li></a>
            <a href="#"><li>Option 2</li></a>
            <a href="#"><li>Option 3</li></a>
            <a href="#"><li>Option 4</li></a>
            <a href="#"><li>Option 5</li></a>
          </ul>
          <div class="subMenuCloseBtn">
            <span><a href="#" onclick="CollapsiblePanel_news.close();">Close&nbsp; &#9650;</a>
            </span>
         </div>
</div><!--Closing div for menu container-->

Через PHP

include 'menu.html'; или же require 'menu.html'

<div id="wrapper">
    <?php include 'menu.html'; ?>
</div>

или же,

<div id="wrapper">
    <?php require 'menu.html'; ?>
</div>

Файл, в котором вызывается этот код, должен быть .php,

Вы также можете использовать include_once 'menu.html' или же require_once 'menu.html', При этом ваш файл будет вызываться только один раз на странице. Если есть другой экземпляр того же файла, он не будет включен.

Через JQuery

<div id="wrapper"></div>
<script>
    $(function() {
        $("#wrapper").load("menu.html");
    }
</script>
Источник

Это возможно через Javascript/jQuery, да. Сохраните это в новый файл, затем используйте функцию jload.) ().

<div id="wrapper">
    Loading, please wait...
</div>

JS:

<script>
$(function() {
    $("#wrapper").load("myfile.html");
}
</script>

ОДНАКО, я бы предложил сделать это с PHP вместо этого. Вы можете просто включить файл с помощью оператора PHP include или require.

<?php
    include "myfile.php";
?>
Источник
Другие вопросы по тегам