zoukankan      html  css  js  c++  java

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

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

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

    实现的效果：
  • 相关阅读:
    Android 单元测试
    Android 读取和保存文件（手机内置存储器）
    Android 检查是否安装SD卡
    Android 检测网络是否可用
    Android 获取网络链接类型
    Android 中如何使用动画
    Ubuntu 下对ADT 添加别名(alias)
    Docker 配置固定IP及桥接的实现方法(转载)
    macOS下通过docker在局域网成功访问mysql5.6数据库
    MySQL 8.0 Docker使用注解
  • 原文地址：https://www.cnblogs.com/jiguiyan/p/10614734.html
Copyright © 2011-2022 走看看