javascript — клонировать весь контейнер 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 или «контейнер» и каким-то образом вызвать этот раздел кода в него.

1

Решение

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

Лучший способ сделать это — использовать 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>
0

Другие решения

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

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

JS:

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

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

<?php
include "myfile.php";
?>
2

По вопросам рекламы [email protected]