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插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
jquery.guide.js新版上线操作向导镂空提示jQuery插件(推荐)
May 20 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
Vue项目中使用jquery的简单方法
May 16 jQuery
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery插件simplePagination的使用方法示例
Apr 28 jQuery
jQuery实现动态向上滚动
Dec 21 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
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
彻底弄懂 JavaScript 执行机制
2018/10/23 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
vue使用screenfull插件实现全屏功能
2020/09/17 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
Python竟能画这么漂亮的花,帅呆了(代码分享)
2017/11/15 Python
python学生管理系统代码实现
2020/04/05 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Centos部署django服务nginx+uwsgi的方法
2019/01/02 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Python如何给函数库增加日志功能
2020/08/04 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
什么是就业协议书
2014/04/17 职场文书
大学应届毕业生求职信
2014/05/24 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
户外活动总结
2015/02/04 职场文书
公司承诺书格式范文
2015/04/28 职场文书
2015年乡镇工会工作总结
2015/05/19 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
张思德观后感
2015/06/09 职场文书
《失物招领》教学反思
2016/02/20 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python