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 相关文章推荐
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
jQuery插件artDialog.js使用与关闭方法示例
Oct 09 jQuery
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
Oct 10 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP操作路由器实现方法示例
2019/04/27 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
深入分析node.js的异步API和其局限性
2016/09/05 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
2017/07/06 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
浅谈AngularJS中$http服务的简单用法
2018/05/15 Javascript
详解webpack4升级指南以及从webpack3.x迁移
2018/06/12 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue 组件开发原理与实现方法详解
2019/11/29 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python下如何让web元素的生成更简单的分析
2008/07/17 Python
Python中生成器和yield语句的用法详解
2015/04/17 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python并发和异步编程实例
2018/11/15 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
在python Numpy中求向量和矩阵的范数实例
2019/08/26 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
C语言笔试题
2014/09/04 面试题
linux面试题参考答案(5)
2016/11/05 面试题
面试求职的个人自我评价
2013/11/16 职场文书
品牌宣传方案
2014/03/21 职场文书
vue实现登陆页面开发实践
2022/05/30 Vue.js