<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="" alt="没有图 加载中">
<script>
var oIMg=document.querySelector("img");
var json = [
{
id: 2,
src: "//g-search1.alicdn.com/img/bao/uploaded/i4/i3/196993935/O1CN01K51MSW1ewH0FchK2U_!!0-item_pic.jpg_250x250.jpg_.webp",
},
{
id: 3,
src: "//g-search2.alicdn.com/img/bao/uploaded/i4/i1/196993935/O1CN01lzSWG11ewH0J3vsPY_!!0-item_pic.jpg_250x250.jpg_.webp",
},
{
id: 4,
src: "//g-search3.alicdn.com/img/bao/uploaded/i4/i1/4162365481/O1CN011qMLIz3bp8dMJMN_!!0-item_pic.jpg_250x250.jpg_.webp"
},
{
id: 1,
src: "https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/32694090/O1CN011g5GNfUn6D6WS0X_!!0-saturn_solar.jpg_250x250.jpg_.webp",
}
]
// ?clothid=2
var id=location.search.substring(location.search.indexOf("=") + 1,);
json.forEach(function (item) {
if(item.id==id){
oIMg.src=item.src;
}
})
</script>
</body>
</html>
第二个网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
float: left;
width: 200px;
height: 200px;
background: red;
list-style: none;
margin: 10px;
}
li img{
width: 100%;
}
</style>
</head>
<body>
<ul>
<li data-id="1"><img src="https://g-search1.alicdn.com/img/bao/uploaded/i4/imgextra/i4/32694090/O1CN011g5GNfUn6D6WS0X_!!0-saturn_solar.jpg_250x250.jpg_.webp" alt=""></li>
<li data-id="2"><img src="//g-search1.alicdn.com/img/bao/uploaded/i4/i3/196993935/O1CN01K51MSW1ewH0FchK2U_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
<li data-id="3"><img src="//g-search2.alicdn.com/img/bao/uploaded/i4/i1/196993935/O1CN01lzSWG11ewH0J3vsPY_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
<li data-id="4"><img src="//g-search3.alicdn.com/img/bao/uploaded/i4/i1/4162365481/O1CN011qMLIz3bp8dMJMN_!!0-item_pic.jpg_250x250.jpg_.webp" alt=""></li>
</ul>
<script>
var oUl=document.querySelector("ul");
oUl.addEventListener("click",function (ev) {
var ev=window.event||ev;
// console.log(ev);
var target=ev.target||ev.srcElement ;
// console.log(target.parentNode.getAttribute("data-id"));
window.open("xiangqing.html?clothid="+target.parentNode.getAttribute("data-id"))
// http://localhost:63342/web5/js14/libiao/xiangqing.html?clothid=1
// http://localhost:63342/web5/js14/libiao/xiangqing.html?clothid=2
})
</script>
</body>
</html>