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正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jquery实现商品sku多属性选择功能(商品详情页)
Dec 20 jQuery
jquery html添加元素/删除元素操作实例详解
May 20 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中memcache的应用
2013/06/18 PHP
PHP限制页面只能在微信自带浏览器访问的代码
2014/01/15 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
Swoole4.4协程抢占式调度器详解
2019/05/23 PHP
PHP与SQL语句写一句话木马总结
2019/10/11 PHP
PHP延迟静态绑定使用方法实例解析
2020/09/05 PHP
js DOM模型操作
2009/12/28 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
2015/12/20 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
JS使用Chrome浏览器实现调试线上代码
2020/07/23 Javascript
Python 深入理解yield
2008/09/06 Python
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python中import导入上一级目录模块及循环import问题的解决
2016/06/04 Python
python装饰器初探(推荐)
2016/07/21 Python
python实现八大排序算法(2)
2017/09/14 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
材料采购员岗位职责
2013/12/17 职场文书
幼儿园教师奖惩制度
2014/02/01 职场文书
聚美优品励志广告词
2014/03/14 职场文书
测绘工程专业求职信
2014/07/15 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
青年岗位能手事迹材料
2014/12/23 职场文书
平遥古城导游词
2015/02/03 职场文书
同学聚会通知书
2015/04/20 职场文书
婚礼上证婚人致辞
2015/07/28 职场文书
表扬信范文
2019/04/22 职场文书
话题作文之关于呼唤
2019/11/29 职场文书