jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法


Posted in jQuery onJanuary 18, 2018

做项目的时候遇到这个问题,,按理说只要是会套模板的,就不该出现这种低级问题。然后我的后台并没有模板,,并且我的js,jquery水平是小学水平,所以这个也困扰了我将近一下午。在此总结一下,分享给大家。分享使我快乐!!!

一、请看代码,容我分析一下

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

1、首先,menu代表我的菜单列表,a标签即是点击的链接。大致思路是先获取a链接的对象,然后进行循环,先取得a链接的href的值。

2、获取跳转后,该页面的url的值。进行比较即可

3、在此需要注意,自己也打印一下,看看如何取值进行对比。

4、对比之后,Url相同的,去掉点击之前那个a对象的class属性,并给现在的a链接加上样式。

二、实现过程

写博客最怕的就是,一顿分析猛如虎,实际操作0/5,所以在此呢就进行一些步骤解析:

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

这个是调试对比的过程。

上面的是获取的a链接的href值。在此需要注意,因为是在循环状态,所以有很多个a链接的href值。

下面是获取该页面的url的值,有图可知,两个并不相等,是有细微的差异的,不过影响不大。

三,jquery对于字符串的截取

var length = String(window.location).lastIndexOf('?');
var url = String(window.location).substring(0,length);

1、jquery的lastIndexof返回的是该符号最后一次出现的位置,即数字。

由此我们可以得到url的?出现的位置

2、substring是截取字符串的函数。我们这里是表示,从第0位开始截取,截取的长度是length值。

3、截取成功之后:

if ($($(this))[0].href == url) {
  $('#menu li a').removeClass("selected");
  $(this).parent().addClass('selected');
  }

对比一下,url相等则加一些样式。

四、实现效果

jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

这个就是效果图了。当实现点击“设备分类”栏目的时候,页面进行跳转,且跳转之后显示粉色,代表当前页面是该页面。

end.

最后吐槽下,这个markdown编辑器是真的不会用,写了好几次,排版还是一如既往的辣鸡。。。不会用啊不会用 TOT

以上这篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
纯jQuery实现前端分页功能
Mar 23 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery Validate表单验证插件实现代码
Jun 08 jQuery
快速掌握jquery分页插件jqPaginator的使用方法
Aug 09 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 jQuery
基于jquery的on和click的区别详解
Jan 15 #jQuery
vue-cli webpack 引入jquery的方法
Jan 10 #jQuery
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 #jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 #jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 #jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 #jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 #jQuery
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
PHP面试题之文件目录操作
2015/10/15 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
jQuery自动或手动图片切换效果
2017/10/11 jQuery
ant design 日期格式化的实现
2020/10/27 Javascript
Python argv用法详解
2016/01/08 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python实现将文件夹下面的不是以py文件结尾的文件都过滤掉的方法
2018/10/21 Python
python3 中文乱码与默认编码格式设定方法
2018/10/31 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
简单介绍python封装的基本知识
2019/08/10 Python
Python Pivot table透视表使用方法解析
2020/09/11 Python
python 爬取免费简历模板网站的示例
2020/09/27 Python
纽约香氛品牌:NEST Fragrance
2018/10/15 全球购物
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
招聘单位介绍信
2014/01/14 职场文书
升职演讲稿范文
2014/05/23 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android
详解如何使用Nginx解决跨域问题
2022/05/06 Servers