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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery实现鼠标响应式透明度渐变动画效果示例
Feb 13 jQuery
基于jQuery实现的设置文本区域的光标位置
Jun 15 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
Sep 03 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现评论模块
Aug 19 jQuery
jQuery实现鼠标拖动图片功能
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数组 为文章加关键字连接 文章内容自动加链接
2011/12/29 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP的curl函数的用法总结
2019/02/14 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
一个javascript图片阅览组件
2010/11/09 Javascript
JS跨域总结
2012/08/30 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
JS传播事件、取消事件默认行为、阻止事件传播详解
2017/08/14 Javascript
angularjs使用gulp-uglify压缩后执行报错的解决方法
2018/03/07 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python定时器实例代码
2017/11/01 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python笔记之代理模式
2019/11/20 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
菲律宾票务网站:StubHub菲律宾
2018/04/21 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
最热门的自我评价
2013/12/30 职场文书
2014年学习雷锋活动总结
2014/03/01 职场文书
《三峡》教学反思
2014/03/01 职场文书
公司人事专员岗位职责
2014/08/11 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
基于Python实现射击小游戏的制作
2022/04/06 Python