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 ▼</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 ▲</a>
</span>
</div>
</div><!--Closing div for menu container-->
Я хочу сохранить весь этот бит кода на его собственной странице под названием «SlideOutPage» (я не совсем уверен, следует ли сохранять страницу tat на странице html, php или другого типа)
Затем … на моей странице index.php я хочу создать новый div или «контейнер» и каким-то образом вызвать этот раздел кода в него.
Решение
Разница между различными методами
Лучший способ сделать это — использовать 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 ▼</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 ▲</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, да. Сохраните это в новый файл, затем используйте jQuery .нагрузка () функционировать так.
<div id="wrapper">
Loading, please wait...
</div>
JS:
<script>
$(function() {
$("#wrapper").load("myfile.html");
}
</script>
ОДНАКО, я бы предложил сделать это с помощью PHP. Вы можете просто включить файл с PHP включают или же требовать заявление.
<?php
include "myfile.php";
?>