Question

我有一个由5个不同页面组成的网站。

为了保持所有页面的设计，我将代码从主页复制并粘贴到所有其他HTML文档，以确保导航框和主要div保持原位。

我现在被要求以这样的方式实现设计：当我按下按钮时，其他HTML页面将动态加载到我的主索引页面上。这样，如果我需要更改页面的设计，我只需要更改索引页面，而不必为我拥有的每个HTML文档重复这些更改。

我已尝试使用Javascript，但我无法想到任何足够的东西。我根本无法理解jQuery，如果有人清楚地了解如何使用jQuery或Javascript完成此任务，请您逐步向我解释一下吗？

<!DOCTYPE html>
<html>

<head>

<link rel="stylesheet"
type="text/css"
href="CSS/Index.css">

</head>
<script src="websitescript.js"> </script>
<body>
<div class="mainwrapper">
<div class="navbox"> 
<input type="image" id='about' src='images/about.jpg' 
onclick="myFunction()"> </a> 
<a href="location.html"> <img src='images/location.jpg' class="location"> 
</a> 
<input type="image" id='contact' src='images/contact.jpg' 
onclick="myFunction()"> </a> 

<a href="inquiries.html"> <img src='images/inquiries.jpg' class="inquiries"> 
</a>

<a href="employees.html"> <img src="images/employees.jpg" class="employees"> 
</a>

</div>

<img src="images/duo.jpg" class='logo'>

<div id="header"> 

</div>
</div>

Answer 1

您要做的是使用AJAX（XmlHttpRequest）加载内容。这意味着，您只有一个页面具有布局，并且无需重新加载页面即可加载内容/其他页面。

为此，您可以使用jQuerys .load()功能。文艺青年最爱的;你要做的是，将网站内容作为简单的html文件，没有布局（标题等），并使用ajax你将它加载到页面。

主页index.html的内容可能如下所示（我在导航栏中删除了这些图片）

<div class="mainwrapper">
  <div class="navbox" id="js-navigation">
    <a href="./about.html">About</a>
    <a href="./location.html">Location</a>
    <a href="./contact.html">Contact</a>
    <a href="./inquiries.html">Inquiries</a>
    <a href="./employees.html">Employees</a>
  </div>

  <div id="header"></div>

  <div id="js-content">
    <!-- content will be loaded here -->
  </div>
</div>

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(document).ready(function() {
    $('#js-content').load('/about.html');

    $('#js-navigation a').click(function(e) {
      e.preventDefault();
      $("#js-content").load(e.target.href);
    })
  });
</script>

因此，在同一个文件夹中，您将拥有其他内容文件，但没有导航，包装标题等。只是简单的内容，如：

<h1>About page</h1>
<p>Lorem Ipsum</p>

Answer 2

好吧所以我的方法有点不同，因为我使用PHP但希望我仍然可以帮助你。我正在做类似的事情，我有“索引”页面，其中包括顶部的导航栏和它下面的空白区域。点击之后，另一个php文件的内容加载到空白区域，并说另一个php文件被包装成div我可以用css编辑。为此，我使用了这个php命令：

<div>
<?php
$page = "MainPanel.php"; // my index
    if (isset($_GET["page"])) {
        $page = $_GET["page"];
    }
    if ($page == "" or $page == "MainPanel.php") {
        $page = "/Main/central.php"; //default page upon running the code.
    }
    $GLOBALS["page"] = $page;

ob_start();
include($page);
ob_end_flush();
?>
</div>

这应该是它。我不太了解php并且我的一个同事建议使用它，但它的代码量相对较少而且运行良好。

如何使用Javascript动态地将内容加载到DIV中

2 个答案: