js + ajax实现商品列表页到详情页的跳转

刻刻帝的海角

已于 2023-11-18 17:46:54 修改

阅读量410

点赞数

文章标签： javascript ajax 开发语言

于 2023-09-09 07:48:48 首次发布

本文链接：https://blog.csdn.net/geng1025/article/details/132772835

版权

html部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>首页</title>
		<link rel="stylesheet" href="./css/index.css">
	</head>
	<body>
		<div class="box"></div>
		<script src="./js/index.js"></script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
	</head>
	<link rel="stylesheet" href="./css/home.css">
	<body>
		<div class="box">

			<div><strong>积分：20</strong>
				<strong>人气：99</strong>
			</div>

		</div> -->
		</div>
		<script src="./js/home.js"></script>
	</body>
</html>

css部分：

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 50%;
	margin-left: 1%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

.item {
	width: 44%;
	margin: 1% 10px;
}

.item img {
	width: 100%;
	height: 300px;
}

.item p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 36px;
}

.item div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

* {
	margin: 0;
	padding: 0;
}

.box {
	width: 50%;
	margin-left: 1%;
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
}

.head {
	width: 100%;
	display: flex;
	align-items: center;
}

.head img {
	width: 20px;
	height: 20px;
}

h1 {
	margin: 0 auto;
}

.item {
	width: 44%;
	margin-top: 5%;
	margin-left: 30%;
}

.item img {
	width: 100%;
	height: 300px;
}

.item p {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	line-height: 36px;
}

.item div {
	width: 100%;
	display: flex;
	justify-content: space-between;
}

JavaScript部分：