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中的deferred对象和extend方法详解
May 08 jQuery
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
Nov 10 jQuery
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery实现开关灯效果
Aug 02 jQuery
jQuery中event.target和this的区别详解
Aug 13 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
php解析url的三个示例
2014/01/20 PHP
PHP微信红包生成代码分享
2016/10/06 PHP
PDO::quote讲解
2019/01/29 PHP
解决Laravel无法使用COOKIE和SESSION的问题
2019/10/16 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Javascript调试工具(下载)
2007/01/09 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
小程序开发之模态框组件封装
2020/04/23 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[01:55]TI9显影之尘系列 - Evil Geniuses
2019/08/22 DOTA
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
如何解决django配置settings时遇到Could not import settings 'conf.local'
2014/11/18 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
Python matplotlib绘图可视化知识点整理(小结)
2018/03/16 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
个人对照检查材料
2014/02/12 职场文书
校园文明标语
2014/06/13 职场文书
建筑工地大门标语
2014/06/18 职场文书
物业管理专业自荐信
2014/07/01 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL