NHB资料

<div class="product-item" data-category="novel"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=http%3a%2f%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0" alt="产品2"> <h3>产品2:西游记</h3> <p>价格:$75</p> <button onclick="addToCart('产品2:西游记', 75, 'https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=http%3a%2f%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain" alt="产品3"> <h3>产品3:水浒传</h3> <p>价格:$100</p> <button onclick="addToCart('产品3:水浒传', 100, 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0" alt="产品4"> <h3>产品4:三国演义</h3> <p>价格:$55</p> <button onclick="addToCart('产品4:三国演义', 55, 'https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain" alt="产品5"> <h3>产品5:红岩</h3> <p>价格:$65</p> <button onclick="addToCart('产品5:红岩', 65, 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain" alt="产品6"> <h3>产品6:开放中的变迁</h3> <p>价格:$50</p> <button onclick="addToCart('产品6:开放中的变迁', 50, 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain" alt="产品7"> <h3>产品7:中国近代史</h3> <p>价格:$55</p> <button onclick="addToCart('产品7:中国近代史', 55, 'https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <img src="https://img3.doubanio.com/lpic/s27258223.jpg" alt="产品8"> <h3>产品8:国史大纲</h3> <p>价格:$65</p> <button onclick="addToCart('产品8:国史大纲', 65, 'https://img3.doubanio.com/lpic/s27258223.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <img src="https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg" alt="产品9"> <h3>产品9:时间简史</h3> <p>价格:$65</p> <button onclick="addToCart('产品9:时间简史', 65, 'https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <img src="https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg" alt="产品10"> <h3>产品10:从一到无穷大:科学中的事实和臆测</h3> <p>价格:$65</p> <button onclick="addToCart('产品10:从一到无穷大:科学中的事实和臆测', 65, 'https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg')">添加到购物车</button> </div>把这些代码改成<div class="product-item" data-category="novel"> <a href="333.html?id=1"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain" alt="产品1"> <h3>产品1:红楼梦</h3> <p>价格:$50</p> </a> <button onclick="addToCart('产品1:红楼梦', 50, 'https://tse4-mm.cn.bing.net/th/id/OIP-C.E1l9GHWnkbNLjcnJpqTpPAHaKC?rs=1&pid=ImgDetMain')">添加到购物车</button> </div>
05-23
以下是将您提供的代码修改为每个商品卡片包含跳转链接的版本。每个商品项都包含一个 `<a>` 标签,用于点击后跳转到商品详情页(`333.html`),并通过 URL 参数传递商品 ID。 --- ### 修改后的代码 ```html <div class="product-item" data-category="novel"> <a href="333.html?id=2"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=http%3a%2f%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0" alt="产品2"> <h3>产品2:西游记</h3> <p>价格:$75</p> </a> <button onclick="addToCart('产品2:西游记', 75, 'https://ts1.tc.mm.bing.net/th/id/R-C.115539104325e27be2f0ee05ca4c080b?rik=xSg%2bwFfcC1%2b2QQ&riu=http%3a%2f%2fimages.bookuu.com%2fbook%2fC%2f01638%2f2634742-fm.jpg&ehk=H9B6G0WCUFgsQjHJE1iAtNWwpFnhmdAg30ByUapdJfY%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="333.html?id=3"> <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain" alt="产品3"> <h3>产品3:水浒传</h3> <p>价格:$100</p> </a> <button onclick="addToCart('产品3:水浒传', 100, 'https://tse3-mm.cn.bing.net/th/id/OIP-C.3JrruqZy-PznYJxAHsoUdAHaKe?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="333.html?id=4"> <img src="https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0" alt="产品4"> <h3>产品4:三国演义</h3> <p>价格:$55</p> </a> <button onclick="addToCart('产品4:三国演义', 55, 'https://ts1.tc.mm.bing.net/th/id/R-C.741a4e06ace8ed3a2a47d2a7fc53efa6?rik=OTex%2bIz3NhB3vw&riu=http%3a%2f%2fsdwypress.com%2fuploads%2fimage%2f2106%2f24%2f210624143125esxhc.jpg&ehk=bJB%2f6p6aW7wkHHbCiUTcnRf%2bNLwOktGxYScy28rgjwg%3d&risl=&pid=ImgRaw&r=0')">添加到购物车</button> </div> <div class="product-item" data-category="novel"> <a href="333.html?id=5"> <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain" alt="产品5"> <h3>产品5:红岩</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品5:红岩', 65, 'https://tse1-mm.cn.bing.net/th/id/OIP-C.4tBovpeIT27lEOj0FuFT5QHaKu?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="333.html?id=6"> <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain" alt="产品6"> <h3>产品6:开放中的变迁</h3> <p>价格:$50</p> </a> <button onclick="addToCart('产品6:开放中的变迁', 50, 'https://tse4-mm.cn.bing.net/th/id/OIP-C.PgSOBNz_XC3Q2b_O9Nkh-wHaLS?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="333.html?id=7"> <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain" alt="产品7"> <h3>产品7:中国近代史</h3> <p>价格:$55</p> </a> <button onclick="addToCart('产品7:中国近代史', 55, 'https://tse2-mm.cn.bing.net/th/id/OIP-C.1O2NDFn3NcQ5UtfKVUX9qwHaLD?rs=1&pid=ImgDetMain')">添加到购物车</button> </div> <div class="product-item" data-category="history"> <a href="333.html?id=8"> <img src="https://img3.doubanio.com/lpic/s27258223.jpg" alt="产品8"> <h3>产品8:国史大纲</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品8:国史大纲', 65, 'https://img3.doubanio.com/lpic/s27258223.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <a href="333.html?id=9"> <img src="https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg" alt="产品9"> <h3>产品9:时间简史</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品9:时间简史', 65, 'https://so1.360tres.com/t0151ae7fb7ec6d8870.jpg')">添加到购物车</button> </div> <div class="product-item" data-category="science"> <a href="333.html?id=10"> <img src="https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg" alt="产品10"> <h3>产品10:从一到无穷大:科学中的事实和臆测</h3> <p>价格:$65</p> </a> <button onclick="addToCart('产品10:从一到无穷大:科学中的事实和臆测', 65, 'https://img.alicdn.com/bao/uploaded/i1/3715517208/O1CN01yttyGV237JTlFwGhn_!!0-item_pic.jpg')">添加到购物车</button> </div> ``` --- ### 代码解释 1. **`<a>` 标签的作用**: - 每个商品项中添加了一个 `<a>` 标签,用于实现点击跳转功能。 - `href="333.html?id=商品ID"` 中的 `id` 参数用于标识具体商品,商品详情页可以通过解析 URL 参数获取商品信息。 2. **保持原有功能不变**: - 每个商品项仍然保留了 `添加到购物车` 按钮,点击按钮时会调用 `addToCart` 函数,将商品添加到购物车中。 3. **动态生成商品列表**: - 如果商品数据较多,可以使用 JavaScript 动态生成商品卡片,避免手动编写大量 HTML 代码。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值