javascript HTML/CSS/JS一个文件中包含多个HTML页面

7lrncoxx 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(163)

我对HTML/CSS/JS相当陌生（大约3个月现在）.我目前正试图创建一个电子商务网站，但我有一个问题，我的产品页面.每当你点击一个产品，它应该带你到一个产品详细信息页面显示的东西，如名称，价格，图片，和一个添加到购物车按钮.我有一个相当多的产品（~25产品），所以它不会是理想的创建一个.html文件的每一个产品.所以我想知道，如果它是可能的所有产品页面在一个HTML文件.

<div class="small-container single-product">
  <div class="row">
    <div class="col-2 col-6" id="gpu1">
      <img src="Images/strix3080.png" width="70%">
    </div>
    <div class="col-2 col-6" id="gpu1">
      <p>Home / Products / ROG STRIX GeForce RTX 3080</p>
      <h1>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h1>
      <h4>&euro;800.00</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>
          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
        </p>
      </div>
    </div>
  </div>
</div>

这是包含产品详细信息页面的所有详细信息以及单击产品图片时加载的内容。
这是我如何使图片可点击（这是在一个单独的HTML文件）：

<div class="row">
  <div onclick="window.location.href='product-details.html'" class="col-4">
    <img src="Images/asus3080.png" />
    <h4>ASUS ROG STRIX GeForce RTX 3080 V2 10GB</h4>
    <p>&euro;800.00</p>
  </div>
</div>

我试着查找如何做到这一点，但他们中的大多数是使用插件（我不知道如何使用）。

JavaScript

来源：https://stackoverflow.com/questions/76034396/html-css-js-multiple-pages-of-html-in-one-file

2条答案

按热度按时间

llmtgqce1#

如果你想在一个页面上显示所有产品，一个不需要后端代码的解决方案，因为你还没有使用服务器端代码，是使用JavaScript迭代每个产品并基于此生成HTML。

const productsArray = [
  {
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

const root = document.getElementById("root")

for (let i = 0; i < productsArray.length; i++) {
  root.innerHTML += `<div class="row">
                        <div onclick="window.location.href='product-details.html'" class="col-4">
                        <img src="Images/${productsArray[i].image}">
                        <h4>${productsArray[i].name}</h4>
                        <p>${productsArray[i].price}</p>
                    </div>`
}

<div id="root"></div>

如果您打算使用模板为每个产品生成页面，则需要编写后端代码，其中服务器将提供API或生成网页。
有许多语言，如PHP，Java，C#和后端JavaScript（NodeJS），您可以使用它来实现这一点。
您可以通过在URL中使用GET参数来伪造每个产品的页面。
示例：https://localhost/?product=1

const productsArray = [
  {
    id: 1,
    name: "ASUS computer",
    image: "asus3080.png",
    price: 50
  },
  {
    id: 2,
    name: "Lenovo computer",
    image: "Lenovo.png",
    price: 50
  },
  {
    id: 3,
    name: "Macbook",
    image: "Mac.png",
    price: 50
  }
]

// This si for the example
const parameterList = new URLSearchParams("?product=1")
const productId = parameterList.get("product")

const root = document.getElementById("root")

const product = productsArray.find(p => p.id == productId);

console.log(productId)

root.innerHTML += `<div class="row">
                      <div onclick="window.location.href='product-details.html'" class="col-4">
                      <img src="Images/${product.image}">
                      <h4>${product.name}</h4>
                      <p>${product.price}</p>
                  </div>`

<div id="root"></div>

赞(0）回复(0）举报 2023-04-19

ttcibm8c2#

由于您不使用后端，为传递数据的每个产品到同一页，你可以改变你的网址像这样
"window.location.href='product-details.html?product_name=Iphone&product_price=1000'"
在product-details.html文件中，你可以使用js从url中获取数据，参考这个https://flaviocopes.com/urlsearchparams/
并使用js将这些数据放置在html中。
希望这能帮助你解决你的问题。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript HTML/CSS/JS一个文件中包含多个HTML页面

2条答案

相关问题

热门标签

最新问答