用javascript实现页面刷新后跳转菜单的定位

采用vue+keepAlive对h5的菜单栏进行定位;实现进入详情页返回时,回到离开菜单栏的位置并刷新。 本篇文章主要处理:h5中在菜单点击菜品,进入菜品详情,返回后回到原来的菜单位置 第一步:在vue项目的根组件也就是App.vue添加keepAlive标签。 主要代码如下: <template> <div id="app" > <keep-alive> //缓存组件的跳转 需要在路由添加keepAlive为true <router-view v-wechat-title="$route.meta.title" v-if="$route 阅读详情
 

用javascript实现页面刷新后跳转菜单的定位  

  在实际设计中,我们常常要用到跳转菜单,跳转后,页面会刷新一下,此时,我们需要让跳转菜单显示我们刚才选择的那一项。试过许多方法后,我感觉用“MenuObj.selectedIndex=”实现是最直接的,这里,需要在页面间传递变量,我试了下,总是没传过去,不知道哪里出错了,好郁闷。
  突然,想到动态网页的地址,形如aaa=bbb&ccc=ddd,那html页面加上这么些东西会怎么样呢?试了下,和原来一样的。好,可以在地址栏放参数了,用个document.location地址就下来了,再在取到的地址栏字符串中截取到我们要的那个参数,这下“MenuObj.selectedIndex=”可以用了。
  正好,在做这么一个页面,就把上面想到的丢到页面里去,代码如下:
  <script language="JavaScript" type="text/JavaScript">
        function SetSelectedIndex(obj)      //obj代表跳转菜单了
       {
          var SelectedIndex;
          var URL=document.location;   
          var SerachTagLocation=null;
          var URLString="/""+URL+"/"";  //不加"的话,会说对象不支持此方法,没办法,就加了
          SerachTagLocation=URLString.indexOf("typeid/=");
         if (SerachTagLocation!=-1)
         {
             var SelectTypeid=URLString.substr(SerachTagLocation+7,1)    //上面找到的是t的位置,要转一下
             var OptString="/""+obj.options[1].value+"/"";           //下面的四行是针对我的需要写的
            var OptSerachTagLocation=OptString.indexOf("=");
            var OptTypeid=OptString.substr(OptSerachTagLocation+1,1)
            SelectedIndex=SelectTypeid-(OptTypeid-1);
         }
          else SelectedIndex=0;
        obj.selectedIndex=SelectedIndex;     //这下可以定位了
         }
        </script>
        只要在跳转菜单后面运行一下上面的函数,就可以实现定位了,当然了,跳转后地址要加上一串行如aaa=bbb的代码了,具体就看自己的需要了。 
         唉~不吐不快啊,终于舒坦了,嘿嘿。

切换tab页,页面局部刷新,地址栏路径修改 js 使用js,实现切换tab页,页面局部刷新(并未重新加载),地址栏路径修改的效果。 立即下载

相关推荐

快速修改Petalinux编译生成的rootfs.cpio.gz文件:无需重新编译的实用技巧

本文详细介绍了如何在不重新编译的情况下快速修改Petalinux生成的rootfs.cpio.gz文件,适用于Zynq平台开发。通过解包image.ub、修改rootfs内容并重新打包的完整流程,可显著提升调试效率,特别适合频繁修改配置文件的场景。文章还提供了自动化脚本和进阶应用技巧,帮助开发者优化工作流程。

weixin_28285943的博客 241

切换tab页,页面局部刷新,地址栏路径修改

需求: 做一个类似百度这种,切换tab,页面展示局部刷新的效果。 思路: tab展示的切换,使用display控制。但是,如果页面刷新,则无法保留显示在tab2的效果,因而在地址栏加参数标记。但如果用a的href或者location.href 均会将整个页面刷新,体验很差,故需只修改地址栏路径,但不刷新页面。 解决: 在切换tab时, 先处理隐藏显示区域的内容, 再将地址栏的内容...

BigOrange的博客 4744

TMS320F280049C 学习笔记21 交叉开关 Crossbar (X-BAR)

简单介绍了X-BAR。

whyorwhnt的专栏 2万+

用javascript实现页面刷新后跳转菜单的定位[原创]

  在实际设计中,我们常常要用到跳转菜单,跳转后,页面会刷新一下,此时,我们需要让跳转菜单显示我们刚才选择的那一项。试过许多方法后,我感觉用“MenuObj.selectedIndex=”实现是最直接的,这里,需要在页面间传递变量,我试了下,总是没传过去,不知道哪里出错了,好郁闷。  突然,想到动态网页的地址,形如aaa=bbb&ccc=ddd,那html页面加上这么些东西会怎么样呢?试了下,和原

往事如风 3540

Jlink除了调试还能干啥?用JFlash SPI给W25Q64烧录固件的5个实用技巧

本文深入探讨了Jlink的隐藏功能,特别是通过JFlash SPI高效烧录W25Q64的5个进阶技巧。从硬件连接优化到批量处理脚本,再到数据安全验证,这些技巧能显著提升烧录速度和稳定性,适用于量产环境。文章还提供了详细的参数配置和脚本示例,帮助工程师充分发挥Jlink的潜力。

weixin_29164843的博客 410

麒麟系统下的多媒体革命:VLC在kylinV10上的性能优化与调试技巧

本文详细介绍了在麒麟kylinV10系统上优化VLC多媒体播放性能的实战技巧,特别针对飞腾FT-2000/4硬件平台。从源码编译调优到硬件加速配置,提供全面的性能提升方案,帮助开发者在国产操作系统上构建高效媒体播放环境。

weixin_29168675的博客 457

HTML刷新页面锚点定位问题

HTML刷新页面锚点定位问题 参考贴 https://developer.mozilla.org/zh-CN/docs/Web/API/Performance https://blog.youkuaiyun.com/zhouziyu2011/article/details/70673123 如果在a标签的href属性中配置了对应的锚点,那么在刷新当前页面的时候,页面会重新定位到锚点所在的位置 如果要解决此问题,说白就是要,刷新的时候页面回到顶部,并且,清除地址栏的锚点定位 需要用到,window.performance

aeoliancrazy的博客 2386

机器人外接 USB 音响完整配置指南

摘要:本文介绍了为机器人配置外接音响的方法。由于内置音响音量小且有散热噪音,建议使用Type-C接口外接音响。配置步骤包括:1)通过aplay -l命令查看音响端口信息;2)使用aplay命令测试音频播放;3)通过amixer命令设置音量。关键点在于正确识别音响的卡号(如card 2)和设备号(如device 0),并在命令中准确配置这些参数即可实现外接音响的正常使用。

m0_47999117的博客 357

js利用tab键切换当前页面_javascript实现tab切换的四种方法

tab切换在网页中很常见,故最近总结了4种实现方法。首先,写出tab的框架,加上最简单的样式,代码如下:*{padding: 0;margin: 0;}li{list-style: none;float:left;}#tabCon{clear: both;}标题一标题二标题三标题四内容一内容二内容三内容四现在的显示效果如下图:四个tab标题和四个内容区都显示在了页面中,现在要实现tab切换效果,即...

weixin_39740283的博客 1557

Jetson Thor平台JP7.0版本96712 GMSL相机驱动调试记录

摘要:本文档记录了在Thor Custom Board (JP7.0GA)上配置GMSL摄像头时遇到的视频流问题及调试过程。问题表现为视频设备(/dev/video11)能正常创建,但获取视频时出现"Internal data stream error",而相同配置在AGX Orin JP6.0上运行正常。通过梳理硬件拓扑、v4l2-ctl测试、提升时钟频率及分析内核日志,发现VI引擎未接收到帧数据包。调试步骤包括检查设备树冲突、调整I2C总线配置、修正通道名称,最终通过屏蔽传感器启动时

jzwjzw19900922的博客 1111

Rockchip 自定义vendorstorages数据再u-boot通过cmdline给kernel传递数据

本文介绍通过vendorstorages,允许保存和读取自定义数据。通过在U-Boot中读取这些数据并将其添加到cmdline中,将这些数据传递给Linux内核,实现了一个灵活的方式来配置和定制系统的需求。

我其实什么都不会 1819

再谈用javascript实现页面刷新后跳转菜单的定位[原创]

  昨天想了下用javascript实现页面刷新后跳转菜单的定位,提出了一个解决办法。但是,总感觉通用性不大,后来一想,干脆就查找obj.options.value中有没有URL中的特定字段,这样通用性就大了,查找可利用for循环,循环次数最大为obj.options.length不就可以了吗?恩,就这么办,写在这里,以备自己和有需要的人参考。

往事如风 2343

宇树G1开发实践--PPT汇报(基础版)

本文介绍了一套基于宇树G1人形机器人的PPT自动演示系统,可实现"一键启动、自动演讲"功能。系统通过多线程同步技术,将音频播放与机器人动作完美结合,支持12种预设社交互动动作。硬件依赖宇树G1机器人、外接音响和网络连接,软件采用Python SDK和ALSA音频工具。核心功能包括音频文件自动排序、外接音响播放控制、机器人动作执行及音画同步。使用时需配置网络接口和音频设备号,运行后自动按顺序播放音频并执行随机动作。系统特别强调了安全注意事项,并提供了常见问题解决方案,适用于展会、汇报等需要

m0_47999117的博客 510

关于javascript跳转与返回和刷新页面

javascript中window.open()与window.location.href的区别 window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面,并不刷新 location.href(‘index.html’) 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面 window.location 是 wind...

想炒股的前端 4989

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

【转载】javaScript常用的东东

[code="java"]1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 no 可用于Table 2. 取消选取、防止复制 3. onpaste="return false" 不准粘贴 4. oncopy="return false;" oncut="return false;" 防止复制 5. ...

修复bug生成bug 134

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

Javascript中最常用的55个经典技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 &lt;table border oncontextmenu=return(false)&gt;&lt;td&gt;no&lt;/table&gt; 可用于Table 2. &lt;body onselectstart="return false"&gt; 取消选取、防止...

thewebcode 138

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

html页面跳转返回不要刷新,javascript跳转与返回和刷新页面的实例代码

javascript中window.open()与window.location.href的区别window.open(‘index.html') 表示新增一个窗口打开 index.html 这个页面,并不刷新location.href(‘index.html') 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面window.location 是 window 对象的属性,...

weixin_34916566的博客 2599

javascript跳转与返回和刷新页面

javascript中window.open()与window.location.href的区别 window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面,并不刷新 location.href(‘index.html’) 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面 window.location 是 window...

A-Select ° 521

.net core 跳转页面_接口测试平台代码实现10:菜单页面升级

留言板小程序成功加载进来,点击可进入该系列的留言板:接口测试平台交流板在介绍项目列表之前,先让我们热热身,做一个各个页面都会出现的右上角返回主页按钮,这里会学习到一些css属性和js的使用。在之前的章节中,我们规定home.html 作为我们的主页。那么我们给其他人分享的平台地址应该是:你的ip:8000/home/在我们之后的旅途中,会生产很多页面和功能。那么使用者如何返回主页呢?很...

weixin_42511338的博客 1292

javascript 55个小技巧

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键 <table border oncontextmenu=return(false)><td>no</table> 可用于Table 2. <body onselectstart="return false"> 取消选取、防止复制...

weixin_30394333的博客 119

h5 跳转上个页面刷新_关于javascript跳转与返回和刷新页面

javascript中window.open()与window.location.href的区别1、window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面,并不刷新location.href(‘index.html’) 表示在当前窗口重定向到新页面,打开并刷新 index.html 这个页面2、window.location 是 window 对象...

weixin_39983051的博客 439

解决iframe作为子窗口,刷新后iframe页面跳转到其它页面的问题

转载请在页首注明作者与出处 http://www.cnblogs.com/zhuxiaojie/p/5990262.html 前言: 在开发网站时,尤其是管理后台,我们经常会使用iframe作为内容窗口,而外面的是菜单部分,这样就可以借助iframe,只刷新内容部分,而不刷新其它的部分。 好处:(1)给用户的视觉效果要好,用户看到的不会是要刷新整个页面。 (2)加载的资源要...

weixin_30933531的博客 633
上一篇: 一个很酷的js菜单
下一篇: 常用.NET工具下载(包括.NET可再发行包2.0)
xdfwsl
博客等级 码龄24年 173粉丝 241原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值