在另一个页面上克隆整个 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 或 'container'，并以某种方式将那部分代码调用到其中。

Answer 1

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

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

JS:

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

但是，我建议用 PHP 代替。您可以只包含带有 PHP include or require 语句的文件。

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

Answer 2

各种方法的区别

最好的方法是使用 PHP，因为它是一种后端脚本语言，不会对访问者可见。如果有人访问该网页，它看起来很正常him/her。

通过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>

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

Clone an entire div container on another page

html

javascript

php

jquery

cloning