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或require语句包含该文件。

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

Answer 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>

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

2 个答案: