在另一个页面上克隆整个 div 容器答案

【问题标题】：Clone an entire div container on another page在另一个页面上克隆整个 div 容器
【发布时间】：2017-03-08 02:19:55
【问题描述】：

我有一个 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 或“容器”，并以某种方式调用该部分代码。

【问题讨论】：

也许我对类似问题的回答对您有帮助stackoverflow.com/questions/42639118/…

标签： javascript php jquery html cloning

【解决方案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";
?>

【讨论】：

只是一个评论，但include/require 不是函数，所以你不需要括号。 include "myfile.php"; 就是你所需要的 (PHP manual)
漂亮，我把它们拿出来了，谢谢。有趣的是，我什至已经把它们称为“陈述”了哈哈
所以如果我理解正确的话......在我的例子中，index.php 页面上的 div 看起来像这样...... 还是我弄错了标记？
PHP 包含应该只使用文件的路径。除了一个 div 之外，不要在文件中放置任何内容。 <?php include "path/to/magical/file.php"; ?>
好的，我会试一试。谢谢。我会尽快告诉你情况如何。

【解决方案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>

【讨论】：