利用cookie,实现刷新页面跳转,左侧菜单点击后状态保持不变。

是一个后台关系系统,后台是phyton,后台把左侧菜单都是利用a标签进行跳转,导致菜单点击状态在页面刷新后失效,用户体验不好,被要求改掉。

查了一些资料。利用cookie终于搞定了这个大问题。主要利用 cookie记录存值。

代码贴上去,以防忘掉

$(".nav-item li a").click(function(){
$.cookie("navstation", $(this).html(), { path: "/" });
});

var navstation = $.cookie("navstation");
if(navstation != null){
$(".nav-item li a").each(function(){
if($(this).html() == navstation){
$(this).parents(‘.nav-item‘).css("display","block");
$(this).addClass("current");
}

});
}

$(‘.cookieli‘).click(function(){
var index=$(this).index();
var iscookie=$(‘.cookieli‘).eq(index).find(‘.cookie-nav‘).css(‘display‘);
if(iscookie=="block"){
$(‘.cookieli‘).eq(index).find(‘.cookie-nav‘).css("display","none");
}else if(iscookie=="none"){
$(‘.cookieli‘).eq(index).find(‘.cookie-nav‘).css("display","block");
}
})

原文地址:https://www.cnblogs.com/wjhaaa/p/8663110.html

时间: 2024-10-12 04:16:56

利用cookie,实现刷新页面跳转,左侧菜单点击后状态保持不变。的相关文章

Axure7.0页面跳转设置动态面板状态

整站原型设计中,不可能把所有功能都在一个页面展示出来,一定要那样做,可能要在一个页面画几十个动态面板,上百个状态了,先不说好不好维护和修改,这样叠罗汉足以让Axure跑死... 所以我们经常按功能分类,分别设计出几个页面来展示.这样问题就来了(挖掘技术究竟哪家强呢?),对于那些有动态面板且面板状态较多的页面,跳转过去的时候,只会显示动态面板第一个状态,肿么办? 情景再现: 有这样一个导航栏,其中首页,信息检索,审核处理这三个功能点设计在一个页面(default.html),用一个动态面板的三个状

整体刷新页面,保持层级菜单展开

1.引入jquery.cookie.js 2.点击菜单选项时,将菜单信息记录到cookie中 $.cookie("navstation", $(this).html(), {path: "/"}); 3.载入页面时候,处理保存到cookie中的菜单     var navstation = $.cookie("navstation");     if(navstation != null){      $(".leftsidebar_b

JavaScript刷新页面n种方法

利用 window.location.href 属性 window.location.href=window.location.href;//刷新当前页面 asp.net 或 asp 利用此功能刷新页面 Response.Write("<script language=javascript>window.location.href=window.location.href;</script>") 认识 location / Location 对象 参考 loca

推荐几种PHP实现页面跳转的方法

1.PHP实现页面跳转第一种方法 <?php header("Location:http://www.baidu.com"); ?> header()是php内置函数,用于实现页面跳转. 2.PHP实现页面跳转第二种方法:利用 jsecho " < script language="javascript">"; echo "location.href='www.abidu.com'"; echo &qu

js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascri

HTML meta refresh 刷新与跳转(重定向)页面

apache做转发使其定义到自己项目的根目录下 修改apache的配置文件httpd.conf: 找到下面一段去掉前面的#号 Include conf/extra/httpd-vhosts.conf 修改httpd-vhosts.conf文件 <VirtualHost *:80>     ServerAdmin [email protected]     DocumentRoot "D:\tomcat\webapps\ceshi"     ServerName www.ce

js控制页面跳转,清缓存,强制刷新页面

单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. 直奔code... 解决办法: 在HTML中埋入隐藏from,通过js调用from进行请求链接地址 <form id='hidden_submit_info' method="post" enctype="multipart/form-data" action=

js 返回上一页和刷新以及页面跳转

1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script

关于js单页面实现跳转原理以及利用angularjs框架路由实现单页面跳转

还记得我们刚开始学习html时使用的锚节点实现跳转吗? <a href="#target">我想跳转至目标位置</a> <p>第一条</p> .... <p id="#target">我是目标位置</p> ... 在js中实现跳转也是利用了这一点,下面直接在代码中解释吧: 1 <body> 2 <ul> 3 <li><a href="#/mus