新手开发者咨询：能否在单个HTML文件中实现多商品详情页

当然可以，不用任何插件，用纯原生HTML+JS就能把所有商品详情整合到单个HTML文件里。下面是具体实现步骤，完全适配你现在的代码结构和知识水平：

1. 统一管理所有商品数据 #

先把25个商品的信息整理成一个JS数组，所有商品的字段保持一致，方便后续渲染。你可以把这段代码单独存成一个products.js文件，或者直接放到详情页的<script>标签里：

const products = [
  {
    id: "gpu1",
    name: "ASUS ROG STRIX GeForce RTX 3080 V2 10GB",
    price: "€800.00",
    image: "Images/strix3080.png",
    breadcrumbs: "Home / Products / ROG STRIX GeForce RTX 3080",
    specs: `Bus Standard: PCI Express 4.0<br>
            Video Memory: 10GB GDDR6X<br>
            Engine Clock: 1440 MHz (Base Clock) 1935 MHz (Boost Clock)<br>
            CUDA Core: 8704<br>
            Memory Speed: 19 Gbps<br>
            Interface: Yes x2 (Native HDMI 2.1), Yes x3 (Native DisplayPort 1.4a), HDCP Support Yes (2.3)<br>
            Resolution: Digital Max Res. 7680 x 4320<br>
            Dimensions: 12.53" x 5.51" x 2.27" Inch 31.85 x 14.01 x 5.78 Centimeter<br>
            Recommended PSU: 850W<br>
            Power Connectors: 3 x 8-Pin`
  },
  // 把剩下24个商品按同样格式添加到这里
  // 示例：
  // {
  //   id: "gpu2",
  //   name: "其他显卡型号",
  //   price: "€XXX.00",
  //   ...
  // }
];

2. 修改列表页的跳转逻辑 #

给每个商品的跳转链接加上商品ID参数，这样详情页就能知道要加载哪个商品：

<div class="row">
  <!-- 第一个商品，id传gpu1 -->
  <div onclick="window.location.href='product-details.html?id=gpu1'" class="col-4">
    <img src="Images/asus3080.png" />
    <h4>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h4>
    <p>&euro;800.00</p>
  </div>
  <!-- 第二个商品，id传gpu2，以此类推 -->
  <div onclick="window.location.href='product-details.html?id=gpu2'" class="col-4">
    <img src="Images/other-gpu.png" />
    <h4>其他显卡型号</h4>
    <p>&euro;600.00</p>
  </div>
</div>

3. 改造详情页，动态渲染内容 #

把详情页原来的静态HTML改成一个空容器，然后用JS根据URL参数里的商品ID，从数组中取出对应数据并渲染：

详情页的HTML结构（只保留容器） #

<div class="small-container single-product" id="productContainer">
  <!-- 商品内容会通过JS动态生成 -->
</div>

<!-- 保留原来的toggleSpecs函数 -->
<script>
function toggleSpecs() {
  const specsDiv = document.getElementById('specs');
  specsDiv.style.display = specsDiv.style.display === 'none' ? 'block' : 'none';
}
</script>

详情页的渲染JS代码 #

添加这段代码到详情页的<script>标签里（记得先引入products.js，如果单独存了文件的话）：

// 从URL中获取商品ID
function getProductId() {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get('id');
}

// 根据商品数据渲染详情内容
function renderProduct(product) {
  const container = document.getElementById('productContainer');
  
  // 如果没找到对应商品，显示提示
  if (!product) {
    container.innerHTML = '<p>抱歉，该商品不存在</p>';
    return;
  }

  // 生成商品详情的HTML结构
  container.innerHTML = `
    <div class="row">
      <div class="col-2 col-6">
        <img src="${product.image}" width="70%">
      </div>
      <div class="col-2 col-6">
        <p>${product.breadcrumbs}</p>
        <h1>${product.name}</h1>
        <h4>${product.price}</h4>
        <input type="number" value="1" max="5">
        <a href="" class="btn add-cart">Add To Cart</a>
        <h3>Specifications<i class="fa fa-indent" onclick="toggleSpecs()"></i></h3>
        <br>

        <div id="specs">
          <p>${product.specs}</p>
        </div>
      </div>
    </div>
  `;
}

// 页面加载完成后自动渲染商品
document.addEventListener('DOMContentLoaded', () => {
  const productId = getProductId();
  const targetProduct = products.find(item => item.id === productId);
  renderProduct(targetProduct);
});

注意事项 #

• 所有商品的id必须唯一，不能重复
• 如果把商品数据存成单独的products.js文件，记得在详情页里用<script src="products.js"></script>引入，放在渲染代码之前
• 原来的toggleSpecs函数要保留，因为动态生成的规格区域还需要用到它

内容的提问来源于stack exchange，提问作者Casper