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

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

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部分:

相关文章
|
7天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
11 0
|
3月前
|
JavaScript
|
5天前
|
前端开发 JavaScript API
JavaScript待办事项列表
JavaScript待办事项列表
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
24 0
|
1月前
|
JavaScript 前端开发 UED
JS自动跳转手机移动网页
JS自动跳转手机移动网页
454 0
|
1月前
|
JavaScript 前端开发
node.js第四天--ajax在项目中的应用
node.js第四天--ajax在项目中的应用
26 0
|
1月前
|
XML 前端开发 JavaScript
node.js第三天-----ajax(3)
node.js第三天-----ajax(3)
26 0
|
1月前
|
JSON JavaScript 前端开发
node.js第三天-----ajax(2)
node.js第三天-----ajax(2)
22 0
|
1月前
|
JSON 前端开发 JavaScript
node.js第三天-----ajax(1)
node.js第三天-----ajax(1)
35 0
|
1月前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表