jsp中通过多种方式实现面包屑导航

我会带着你远行 2023-10-18 14:51 52阅读 0赞

## 效果 ##

![Image 1][]![20190225101821663.jpg][]

## 实现 ##

### jsp页面代码 ###

当前位置：<a href="${ctx}/jsp/front/readOrder.jsp">待合单</a>
                    > <a  onclick="goBack()" class='pointer' >查询</a>
                     > <a  onclick="goBack2()" class='pointer' >确认合单</a>
                     ><span class="c_gray_999">打印</span>

方式1：

直接通过将标签a的href属性写死，这就属于纯通过超链接跳转，此时页面不需要回传数据，只是简单的跳转页面。

方式2：

点击查询时，执行方法goBack()。代码如下

function goBack(){
             window.location.href ="${ctx}/jsp/front/swichOrder.jsp?paramDate="+backDay;
            };

这种方式也是通过给a标签的href属性赋值，不过就是a的href属性为动态赋值的不是写死的。

这样导航过去时，url与过来时一致，所以会保留比如日期选择插件的数据。

注意：

这种要获取当前url中的参数，即追加的backDay参数。

首先

var backDay;

然后在页面加载完之后就获取当前请求的url中追加的参数

$(function(){
            var a=GetRequest();
         backDay=a['deliverDay'];
        })

通过GetRequestt()方法获取。

function GetRequest() {
             var url = location.search; //获取url中"?"符后的字串
             var theRequest = new Object();
             if (url.indexOf("?") != -1) {
                 var str = url.substr(1);
                 strs = str.split("&");
                 for (var i = 0; i < strs.length; i++) {
                     theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);
                 }
             }
              return theRequest;
          };

方式三：

如果当前请求的url追加的参数比较多，可以通过最简单的返回上一页的方法来实现。

history.back(-1)

会返回当前页的上一页并重新加载页面

history.go(-1)

会返回当前页的上一页，保留原有数据

比如这里的goBack2()

function goBack2(){
             history.go(-1)
            };

[Image 1]: 
[20190225101821663.jpg]: https://img-blog.csdnimg.cn/20190225101821663.jpg

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关 jsp中通过多种方式实现面包屑导航

效果 ![Image 1][]![20190225101821663.jpg][] 实现 jsp页面代码当前位置：<a href="${ctx}/

我会带着你远行/ 2023年10月18日 14:51/ 0 赞/ 53 阅读

相关 jquery 面包屑导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

亦凉/ 2022年09月30日 00:50/ 0 赞/ 186 阅读

相关 Bootstrap面包屑导航

Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如

谁借莪１个温暖的怀抱￠/ 2022年08月23日 14:42/ 0 赞/ 213 阅读

相关纯CSS实现面包屑式导航

参照着[教程][Link 1]做了一个面包屑式的导航。在这里分享一下实现方式，自己也在温习一下。首先效果如图： ![221956386835074.jpg][]

柔光的暖阳◎/ 2022年08月06日 12:24/ 0 赞/ 239 阅读

相关 CSS 面包屑导航栏

先看一下效果图 ![导航][20161025094243437] 1.首先写好`HTML`代码 <ul> <li><a href="">Home

青旅半醒/ 2022年07月14日 22:48/ 0 赞/ 306 阅读

相关如何做成面包屑导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

￡神魔★判官ぃ/ 2022年07月10日 04:59/ 0 赞/ 208 阅读

相关 Bootstrap 面包屑导航（Breadcrumbs）

Bootstrap 面包屑导航（Breadcrumbs）面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类

ゞ浴缸里的玫瑰/ 2022年05月12日 02:46/ 0 赞/ 248 阅读

相关 layui面包屑导航

面包屑当点击增加一个数据，当回点时，覆盖原有等级的数据 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM

朱雀/ 2022年03月01日 11:20/ 0 赞/ 720 阅读

相关 jquery 面包屑导航具体实现

jquery 面包屑导航具体实现，需要的朋友可以参考一下详细出处参考：http://www.jb51.net/article/37928.htm

ゝ一纸荒年。/ 2022年01月22日 11:01/ 0 赞/ 380 阅读

相关面包屑导航

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator

古城微笑少年丶/ 2022年01月15日 04:33/ 0 赞/ 375 阅读