我有一个产品库页面，每个产品有一张卡片，当我单击其中一张卡片时，我想显示产品详细信息页面。如何将所有产品的产品详细信息放入单个 HTML 文件中，以便在单击图库页面上的产品卡时，它将仅显示该特定产品的产品详细信息？
我正在寻找一个完全用 HTML、CSS 和 JS 实现的解决方案。
是的，这可以使用查询字符串来完成。
链接到产品详细信息页面时，添加查询字符串来标识您要显示哪个产品的详细信息，如下所示：
https://my.website.com/product_details.html?product=4321
然后在
product_details.html<head>
<style>
.product-details {
display: none;
}
.product-details.visible {
display: unset;
}
</style>
</head>
<body>
<div class="product-details" data-product="1234">
This product will save you lots of time in the kitchen.
</div>
<div class="product-details" data-product="4321">
This product will kill all the bugs within a five kilometre radius.
</div>
<script>
/* parse the query string */
const urlParams = new URLSearchParams(window.location.search)
/* access the product parameter */
const productParam = urlParams.get('product')
/* find the details which matches the product parameter */
const productDetails = document.querySelector(`.product-details[data-product="${productParam}"]`)
/* show the details */
productDetails.classList.add('visible')
</script>
</body>