javascript - 在另一个页面上克隆整个 div 容器

Question

我有一个 div 容器，其中包含其他几个 div 和其他内容，它们共同构成了我的侧边导航菜单。

我想从另一个页面调用整个 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 或“容器”，并以某种方式将那部分代码调用到其中。

Answer 1

这可以通过 Javascript/jQuery 实现，是的。将其保存到一个新文件中，然后使用 jQuery 的 .load()像这样的功能。

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

JS:

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

但是，我建议改用 PHP 来执行此操作。您可以只包含带有 PHP include 的文件。或 require声明。

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