在条幅中我们可以通过点击商品的名称以及图片实现跳转到详情页面：
<!--banner--> <div class="banner"> <div class="container"> <h2 class="hdng"><a href="${pageContext.request.contextPath }/goods_detail?id=${scroll.id}">${scroll.name}</a><span></span></h2> <p>今日精选推荐</p> <a class="banner_a" href="javascript:;" onclick="buy(7)">立刻购买</a> <div class="banner-text"> <a href="${pageContext.request.contextPath }/goods_detail?id=${scroll.id}"> <img src="${pageContext.request.contextPath }${scroll.cover}" alt="${scroll.name}" width="350" height="350"> </a> </div> </div> </div> <!--//banner-->
实现的效果如下：
index.jsp
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 4 5 6 7 <!DOCTYPE html> 8 <html> 9 <head> 10 <title>商品列表</title> 11 <meta name="viewport" content="width=device-width, initial-scale=1"> 12 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 13 <link type="text/css" rel="stylesheet" href="css/bootstrap.css"> 14 <link type="text/css" rel="stylesheet" href="css/style.css"> 15 <script type="text/javascript" src="js/jquery.min.js"></script> 16 <script type="text/javascript" src="js/bootstrap.min.js"></script> 17 <script type="text/javascript" src="layer/layer.js"></script> 18 <script type="text/javascript" src="js/cart.js"></script> 19 </head> 20 <body> 21 22 23 <!-- header --> 24 <jsp:include page="/header.jsp"> 25 <jsp:param value="1" name="flag"/> 26 27 28 29 </jsp:include> 30 31 32 33 34 35 36 37 38 <!--banner--> 39 40 41 <div class="banner"> 42 <div class="container"> 43 <h2 class="hdng"><a href="${pageContext.request.contextPath }/goods_detail?id=${scroll.id}">${scroll.name}</a><span></span></h2> 44 <p>今日精选推荐</p> 45 <a class="banner_a" href="javascript:;" onclick="buy(7)">立刻购买</a> 46 <div class="banner-text"> 47 <a href="${pageContext.request.contextPath }/goods_detail?id=${scroll.id}"> 48 <img src="${pageContext.request.contextPath }${scroll.cover}" alt="${scroll.name}" width="350" height="350"> 49 </a> 50 </div> 51 </div> 52 </div> 53 54 <!--//banner--> 55 56 <div class="subscribe2"></div> 57 58 <!--gallery--> 59 <div class="gallery"> 60 <div class="container"> 61 <div class="alert alert-danger">热销推荐</div> 62 <div class="gallery-grids"> 63 64 <c:forEach items="${hotList}" var="g"> 65 <div class="col-md-4 gallery-grid glry-two"> 66 <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}"> 67 <img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name}" width="350" height="350"/> 68 </a> 69 <div class="gallery-info galrr-info-two"> 70 <p> 71 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 72 <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}">查看详情</a> 73 </p> 74 <a class="shop" href="javascript:;" onclick="buy(6)">立刻购买</a> 75 <div class="clearfix"> </div> 76 </div> 77 <div class="galy-info"> 78 <p>${g.typeName}> ${g.name}</p> 79 <div class="galry"> 80 <div class="prices"> 81 <h5 class="item_price">￥${g.price}</h5> 82 </div> 83 <div class="clearfix"></div> 84 </div> 85 </div> 86 </div> 87 88 89 </c:forEach> 90 91 92 93 </div> 94 95 96 97 98 99 100 101 102 103 104 105 <div class="clearfix"></div> 106 <div class="alert alert-info">新品上市</div> 107 <div class="gallery-grids"> 108 <c:forEach items="${newList}" var="g"> 109 <div class="col-md-3 gallery-grid "> 110 <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}"> 111 <img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name}"/> 112 </a> 113 <div class="gallery-info"> 114 <p> 115 <span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 116 <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}">查看详情</a> 117 </p> 118 <a class="shop" href="javascript:;" onclick="buy(14)">立刻购买</a> 119 <div class="clearfix"> </div> 120 </div> 121 <div class="galy-info"> 122 <p>${g.typeName}> ${g.name}</p> 123 <div class="galry"> 124 <div class="prices"> 125 <h5 class="item_price">¥ ${g.price}</h5> 126 </div> 127 <div class="clearfix"></div> 128 </div> 129 </div> 130 </div> 131 </c:forEach> 132 133 134 135 136 137 138 139 140 141 142 </div> 143 </div> 144 </div> 145 <!--//gallery--> 146 147 <!--subscribe--> 148 <div class="subscribe"></div> 149 <!--//subscribe--> 150 151 152 153 154 <!-- footer --> 155 <jsp:include page="/footer.jsp"></jsp:include> 156 157 158 159 160 </body> 161 </html>
实现当点击导航栏中商品分类时各个页面中的图片或者查看详情都可以实现跳转到详情页面：
goods_list.jsp
<!--products--> <div class="products"> <div class="container"> <h2><c:choose><c:when test="${empty t }">全部系列</c:when><c:otherwise> ${t.name}</c:otherwise></c:choose></h2> <div class="col-md-12 product-model-sec"> <c:forEach items="${p.list}" var="g"> <div class="product-grid"> <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}"> <div class="more-product"><span> </span></div> <div class="product-img b-link-stripe b-animate-go thickbox"> <img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name }" width="240" height="240"> <div class="b-wrapper"> <h4 class="b-animate b-from-left b-delay03"> <button>查看详情</button> </h4> </div> </div> </a> <div class="product-info simpleCart_shelfItem"> <div class="product-info-cust prt_name"> <h4>${g.name}</h4> <span class="item_price">¥${g.price}</span> <input type="button" class="item_add items" value="加入购物车" onclick="buy(6)"> <div class="clearfix"> </div> </div> </div> </div> </c:forEach>
实现的效果：
实现当点击导航栏中的新品热销中的商品进行详情页面的跳转：
goodsrecommend_list.jsp
<!--products--> <div class="products"> <div class="container"> <h2><c:choose><c:when test="${t==2 }">热销商品</c:when><c:otherwise>新品上市</c:otherwise></c:choose></h2> <div class="col-md-12 product-model-sec"> <c:forEach items="${p.list}" var="g"> <div class="product-grid"> <a href="${pageContext.request.contextPath }/goods_detail?id=${g.id}"> <div class="more-product"><span> </span></div> <div class="product-img b-link-stripe b-animate-go thickbox"> <img src="${pageContext.request.contextPath }${g.cover}" class="img-responsive" alt="${g.name }" width="240" height="240"> <div class="b-wrapper"> <h4 class="b-animate b-from-left b-delay03"> <button>查看详情</button> </h4> </div> </div> </a> <div class="product-info simpleCart_shelfItem"> <div class="product-info-cust prt_name"> <h4>${g.name}</h4> <span class="item_price">¥${g.price}</span> <input type="button" class="item_add items" value="加入购物车" onclick="buy(6)"> <div class="clearfix"> </div> </div> </div> </div> </c:forEach>
实现的效果：
