您正在寻找的技术是 DHTML（动态 HTML）和 AJAX（异步 JavaScript 和 XML）的组合。
DHTML：
DHTML 背后的想法是，当用户从服务器请求 HTML 页面时，服务器会响应该页面以及用户执行某些操作（例如单击产品图像）时可能需要的其他数据。
服务器在初始页面加载时返回到 HTML 页面的数据通常默认隐藏。例如，页面的 DOM 已加载，但元素上可能有 style="display:none"。
一旦用户启动某个操作，页面就会使用 JavaScript 来操作页面上可见的元素以及可能隐藏的元素。
考虑以下页面：
<body>
<div id="page1">
<div id="container">
<div class="img">
<a id="product1" onclick="showProduct1();" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" onclick="showProduct2();" href="#">
<img src="product.jpg"/> </a>
</div>
</div>
</div>
<div id="page2" style="display:none">
<div id="product_page_wrapper">
<a href="#" onclick="backToCategories()">back to Product Categories</a>
<div id="productDetails">
<div id="prod1">
...
...
</div>
<div id="prod2">
...
...
</div>
</div
</div>
</div>
</body>
上面的页面分为两个部分，一个是 id="page1"，另一个是 id="page2"。默认情况下，我们隐藏第 2 页。
当用户点击产品链接时，我们隐藏第 1 页并显示第 2 页：
document.getElementById("page1").setAttribute("style","display:none");
document.getElementById("page2").setAttribute("style","display:block");
此外，根据单击的链接，我们还取消隐藏被单击产品的产品详细信息，并隐藏未单击产品的详细信息。例如，如果点击产品 1，我们会显示产品 1：
document.getElementById("prod2").setAttribute("style","display:none");
document.getElementById("prod1").setAttribute("style","display:block");
最终结果是只显示 page2 div。如果用户单击“返回产品类别”链接，我们会反转该过程，隐藏 page2 并显示 page1。
总之，这种类型的操作可以完全在客户端完成，无需任何 PHP 或服务器端代码，只需使用HTML、JavaScript 和 CSS，正如 @Marcel 所指出的那样。然而，使用纯 DHTML 更多的是一种学术练习，而不是一种实际的解决方案，因为服务器端维护客户数据、产品数据以及专业的、产生收入的产品所需的一切。
阿贾克斯：
另一方面，AJAX 与 DHTML 非常相似，甚至可以被视为 DHTML 的扩展。AJAX 背后的想法是——当用户启动一个动作时——页面从服务器请求数据。当服务器响应时，数据被传递给回调函数，然后使用数据操作页面。
在您的特定示例中，您可能会使用 DHTML 和 AJAX 的组合来实现所需的效果。考虑以下页面，该页面使用 AJAX 为用户选择的产品提取相关 HTML：
<head>
<script type="text/javascript" src="external.js"></script>
<script>
function makeRequest(url) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = displayContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function displayContents() {
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
//alert(httpRequest.responseText);
document.getElementById("container").innerHTML = httpRequest.responseText;
} else {
alert('There was a problem with the request.');
}
}
</script>
</head>
<body>
<div id="container">
<div class="img">
<a id="product1" onclick="makeRequest('/getproduct?id=1')" href="#">
<img src="product.jpg"/> </a>
</div>
<div class="img">
<a id="product2" href="#" onclick="makeRequest('/getproduct?id=2')">
<img src="product2.jpg"/></a>
</div>
</div>
</body>
在上面的示例中，当用户单击产品的链接时，服务器会以足够的 HTML 响应来充分替换页面的 div#container 部分：
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
这被注入到页面中，以便 DOM 看起来像这样：
<body>
<div id="container">
<span id="product">
<p>Product Name 1</p>
<p>Product details...</p>
</span>
</div>
</body>
概括：
这个问题被标记为 JavaScript，而不是 jQuery，因此答案集中在 JavaScript 上，但 DHTML 部分中描述的技术在许多 JavaScript 库中都有使用。例如，有关您描述的技术的演示，请参阅jQuery Mobile 的多页模板。