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实现 RadioButton做必选校验功能
Jun 15 jQuery
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jquery-file-upload 文件上传带进度条效果
Nov 21 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery实现简单轮播图效果
Dec 27 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
PHP过滤黑名单关键字的方法
2014/12/01 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
使用正则替换变量
2007/05/05 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
2017/02/04 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
self.attachevent is not a function的解决方法
2017/04/04 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
详解js的作用域、预解析机制
2018/02/05 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
ES6 系列之 WeakMap的使用示例
2018/08/06 Javascript
JS中的防抖与节流及作用详解
2019/04/01 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python对html代码进行escape编码的方法
2015/05/04 Python
详解Python中的各种函数的使用
2015/05/24 Python
Python的爬虫框架scrapy用21行代码写一个爬虫
2017/04/24 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Django ORM 查询管理器源码解析
2019/08/05 Python
python DES加密与解密及hex输出和bs64格式输出的实现代码
2020/04/13 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
linux面试题参考答案(4)
2014/09/21 面试题
2019毕业论文致谢词
2019/06/24 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书