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实现frame之间互通的方法
Jun 26 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
Jul 17 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
ajax jquery实现页面某一个div的刷新效果
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
缓存技术详谈―php
2006/12/14 PHP
深入理解用mysql_fetch_row()以数组的形式返回查询结果
2013/06/05 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
javascript 鼠标滚轮事件
2009/04/09 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
javascript实现密码验证
2015/11/10 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
element-ui 弹窗组件封装的步骤
2021/01/22 Javascript
[38:41]2014 DOTA2国际邀请赛中国区预选赛 LGD VS CNB
2014/05/22 DOTA
Python可跨平台实现获取按键的方法
2015/03/05 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python dict 相同key 合并value的实例
2019/01/21 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python抓取多种类型的页面方法实例
2019/11/20 Python
Python 日期与时间转换的方法
2020/08/01 Python
python之随机数函数的实现示例
2020/12/30 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
干部考察材料范文
2014/12/24 职场文书
教师聘用意向书
2015/05/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
订货会主持词
2015/07/01 职场文书
详解Oracle块修改跟踪功能
2021/11/07 Oracle