我一直在努力学习其中的大部分内容，所以对于之前的问题，我提出的一些问题可能看起来过于简单或明显地笼罩在我的脑海中 - 也就是说，我通过同伴解释/示例/建议学得最好提前致谢。
到目前为止，我已经使用在这里学到的知识构建了我的个人网站的基本结构。这个概念是一个右对齐的 Accordion 菜单，它从一个页面到另一个页面保持不变，而左侧区域中的内容和背景将根据菜单选择而改变——从根本上讲，就像过去的框架或 iframe 一样。
问题: 我有一些 js 知识，我知道我可以通过 getElementById 循环出一些内容，但由于这些内容将在画廊中，我不想通过在后台加载 54+ 图像来拖慢我的速度。我也知道我可以让侧边栏中的缩略图与 php 链接并完全加载页面，但由于我不想更改菜单，所以我一直在尝试找出解决此问题的最佳方法。到目前为止，我听说过 PHP、JQuery 和 AJAX(我知道它们的名字，但对我来说是新的)。下面是代码示例和我想做的事情:
<body>
<div id="all">
<div id="live-area">
<?php include("blog.php") ?>
</div>
<div id="side-bar-area">
<div id="sidebar-header">
<h3>Title</h3>
<h1>Title</h1>
</div>
<div id="nestedAccordion">
<h2>Portfolio</h2>
<div>
<h3>Branding</h3>
<div>
<ul>
<li class="thumbs">
<a href="#"><img src="images/thumbs/example1.jpg"/></a>
<a href="#"><img src="images/thumbs/example2.jpg"/></a>
<a href="#"><img src="images/thumbs/example3.jpg"/></a>
<a href="#"><img src="images/thumbs/example4.jpg"/></a>
<a href="#"><img src="images/thumbs/example5.jpg"/></a>
<a href="#"><img src="images/thumbs/example6.jpg"/></a>
<a href="#"><img src="images/thumbs/example7.jpg"/></a>
<a href="#"><img src="images/thumbs/example8.jpg"/></a>
<a href="#"><img src="images/thumbs/example9.jpg"/></a>
</li>
</ul>
</div>
<h2>Blog</h2>
<div>
<ul style="margin:0px;">
<li>entry 1</li>
<li>entry 2</li>
</ul>
</div>
<h2>About</h2>
<div>
<ul style="margin:0px;">
<li>About</li>
<li>Resume</li>
<li>Accolades</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</body>
基于以上，我想要的是每当菜单中的任何元素，如<a href="#"><img src="images/thumbs/example1.jpg"/></a>选择它会改变<?php include("blog.php") ?>的内容无需重新加载页面。
首先，这可行吗？其次，有没有人在这方面对新手有建议 - 基本教程或外行操作方法？
最佳答案
当您将 jquery 添加到您的标签时，您可以使用 AJAX 执行服务器端请求并加载新内容并替换现有内容。
$.ajax({
url: 'http://example.org/other-page.php',
dataType: 'html'
})
.done(function(data) {
// Assuming the request returns HTML, replace content
$('#live-area').html(data);
});
关于php - 如何在不重新加载页面的情况下更改 php 包含？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21872750/