Question

因此，我正在尝试在我的网站上构建一个信息页面，这个页面相当广泛，足以让它拥有自己的导航和子导航。

导航器目前正在构建，现在我需要引入和链接内容以我想要的方式显示，但这就是我开始迷失在如何有效地构建它的地方。我会尝试尽可能详细地说明它所存在的结构。

首先，所有这些必须发生在网站的一个页面上。导航中的链接应该触发不同的内容，但是在与此Nav交互时，应该永远不要离开页面（我想重新加载它是可以的，但不是更好）。

页面是从“template.php”加载的，它基本上只有不同的div，其中包含一个函数$ definepage来加载它们的内容。

类似的东西：

<div class="middleArea" id="infoPage">
   <div id="Nav" class="content">
      <?php require($definepage); ?>
   </div>

   <div class="returnNav"><img>backbutton</img></div>
</div>

我想在此模板中添加一个单独的div，用于在不离开页面的情况下动态显示用户所需的内容。因此，如果选择“项目6a”，则此div将加载项目的相应内容，然后如果选择“Item2b”，则div将加载该项目的内容 - 之前的内容不再存在。

我有大约八个主要Nav项目，其中六个有多项子项目。所以有很多内容，这就是为什么我不想让它全部存在于页面上而只是隐藏并显示链接以显示页面加载的原因。

但我需要来自第一个div（在模板中）的链接在（将）内容区域div中加载正确的.php，并在加载相应的php时保持“活动”以保持突出显示 - 显示该链接的信息当前正在显示。

这可以通过 a href =“＃anchors”来完成吗？或者我可以以某种方式将内容区域存在于模板的同一div中，但仍然从外部php加载所以它不需要加载页面？（我认为PHP中的php内的php是一个坏主意）

Answer 1

如果您想在不重新加载页面的情况下加载某些内容，可以使用AJAX。

Answer 2

您应该使用JavaScript来更改页面内容，而无需重新加载/更改URL，使用@antoyo提到的AJAX调用，根据需要在服务器和客户端之间传输数据。

Answer 3

以下是使用jQuery的ajax请求的示例：

http://jsfiddle.net/dj50uev5/1/

HTML：

<div id="placeholder">

</div>

<input type="button" value="Ajax Call Test" />

使用Javascript：

$('input').click(function() {
    $.ajax({
        url: "internalUrlOrFile.txt",
        context: document.body
    }).success(function(data) {
        $('#placeholder').html( data );
    });
});

我无法提供实际样本，因为跨域原始政策会自动添加内容。

如果您需要进一步澄清，请与我们联系。

Answer 4

可能的解决方案：

如果我使用iframe将“单独的站点”作为我站点的根文件夹中的单独目录加载，该页面将包含所需内容，该怎么办？导航中的链接是指向“内容网站”中相应页面的URL吗？

这里有任何明显的功能问题吗？在纸面上看起来它会起作用。

*（请忽略以前成语对网络媒体的讽刺用法）

PHP - 使用PHP构建和格式化页面

4 个答案: