前台开发---开发各个页面到详情页面的跳转

在条幅中我们可以通过点击商品的名称以及图片实现跳转到详情页面：

<!--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>

index.jsp

实现当点击导航栏中商品分类时各个页面中的图片或者查看详情都可以实现跳转到详情页面：

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>

实现的效果：